Credit Card

import { CreditCard } from '@hanzo/ui'

export function Default() {
  return <CreditCard />
}

export function FilledIn() {
  return (
    <CreditCard
      number="4111 1111 1111 1111"
      name="ADA LOVELACE"
      expiry="09/30"
      cvv="123"
    />
  )
}

export function Minimal() {
  return (
    <CreditCard
      variant="minimal"
      number="5500 0000 0000 0004"
      name="GRACE HOPPER"
      expiry="12/29"
    />
  )
}

export function SideBySide() {
  return (
    <XStack flexWrap="wrap" gap="$4">
      <YStack width={320}>
        <CreditCard name="ALAN TURING" expiry="06/28" />
      </YStack>
      <YStack width={320}>
        <CreditCard variant="minimal" name="ALAN TURING" expiry="06/28" />
      </YStack>
    </XStack>
  )
}

Types

export type CreditCardVariant = 'default' | 'minimal'

export type CreditCardProps = Omit<ComponentProps<typeof Frame>, 'variant' | 'children'> & {
  /** The card number, formatted or masked by the caller. */
  number?: string
  /** The name printed on the card. */
  name?: string
  /** MM/YY expiry, printed as given. */
  expiry?: string
  /** Security code, shown only when set. */
  cvv?: string
  variant?: CreditCardVariant | null
}

Exports