hanzo.ai/components/payments/kit.tsx

'use client'

/**
 * /payments is one page in eight files, and every one of them drew the same
 * three things: a tile, a bullet and a chip. They are here once.
 *
 * The tile is NOT `components/marketing/band`'s `Card` and is not meant to be:
 * this page's card is a 12px corner over a fainter ground at 24px of padding,
 * where the product band's is a 24px corner over a stronger one at 28. Two
 * designs, and folding them would change the picture on whichever page lost.
 * It is BUILT on `Card` so the edge and the ink stay one decision.
 */

import type { ComponentProps, ReactNode } from 'react'
import { Card, Words } from '@/components/marketing/band'
import { XStack } from '@hanzo/ui'
import type { LineProps } from '@hanzo/ui/marketing'

export function Tile(props: ComponentProps<typeof Card>) {
  return (
    <Card
      rounded="var(--radius-lg)"
      bg="$panel"
      p="$5"
      {...props}
    />
  )
}

/**
 * A tile's heading, and the paragraph under it. Each leading is design's token
 * for its rung, so the knobs that retune the ramp reach these lines too.
 */
export function Heading(props: LineProps) {
  return <Words render="h3" mb={12} fontSize="$6" lineHeight="var(--leading-xl)" weight="600" {...props} />
}
export function Body(props: LineProps) {
  return <Words render="p" fontSize="$3" lineHeight="var(--leading-base)" color="var(--muted-foreground)" {...props} />
}

/** The type a list of `Bullet`s reads in when it sits under a `Body`. */
export const LIST = { fontSize: 'var(--text-base)', lineHeight: 'var(--leading-base)', color: 'var(--muted-foreground)' } as const

/**
 * A bulleted line. The dot is a character rather than a marker so it takes the
 * page's ink rather than the list's, which is what the markup already meant by
 * putting it in its own span.
 */
export function Bullet({ children }: { children: ReactNode }) {
  return (
    <XStack render="li" items="flex-start" gap="$2">
      <Words color="var(--foreground)">•</Words>
      <span>{children}</span>
    </XStack>
  )
}

/** A word in a filled pill — a payment method, an integration name. */
export function Chip({ children, ...rest }: LineProps) {
  return (
    <Words
      /* A SPAN. A chip is a word, and a div in a run of words is a block —
         which the rendered text reads as ten lines where the page draws one. */
      render="span"
      display="inline-block"
      px="$3"
      py="$1"
      rounded="var(--radius-full)"
      bg="var(--neutral-800)"
      fontSize="$2"
      lineHeight="var(--leading-sm)"
      color="color-mix(in oklab, var(--foreground) 80%, transparent)"
      {...rest}
    >
      {children}
    </Words>
  )
}