3d Pin

import { Pin3D } from '@hanzo/ui'

export function Default() {
  return (
    <XStack justify="center" p="$8">
      <Pin3D>
        <YStack
          width={200}
          height={200}
          bg="$accentBackground"
          rounded="$6"
          items="center"
          justify="center"
        >
          <SizableText color="$accentColor" fontWeight="600">
            Hover me
          </SizableText>
        </YStack>
      </Pin3D>
    </XStack>
  )
}

export function AsLink() {
  return (
    <XStack justify="center" p="$8">
      <Pin3D href="https://ui.hanzo.ai" title="Hanzo UI">
        <YStack
          width={200}
          height={120}
          bg="$panel"
          borderWidth={1}
          borderColor="$borderColor"
          rounded="$6"
          items="center"
          justify="center"
        >
          <SizableText>ui.hanzo.ai</SizableText>
        </YStack>
      </Pin3D>
    </XStack>
  )
}

export function Row() {
  return (
    <XStack gap="$4" justify="center" p="$8" flexWrap="wrap">
      {["Chain", "Wallet", "Bridge"].map((label) => (
        <Pin3D key={label}>
          <YStack
            width={140}
            height={140}
            bg="$edge"
            rounded="$4"
            items="center"
            justify="center"
          >
            <SizableText>{label}</SizableText>
          </YStack>
        </Pin3D>
      ))}
    </XStack>
  )
}

Types

export type Pin3DProps = ComponentProps<typeof Frame> & {
  /** Tooltip for the destination; carried through as the title attribute. */
  title?: string
  /** Where the pin leads. Renders the frame as a link when set. */
  href?: string
}

Exports