Tile

import { Add, Featured, Tile, Tiles } from '@hanzo/ui/catalog'

export function Default() {
  const [added, setAdded] = useState(false)
  return (
    <YStack width="100%">
      <Tiles label="Connectors">
        <Tile title="GitHub" detail="Repositories, issues and pull requests." meta="Official" mark={<Mark letter="G" />} onOpen={() => {}} action={<Add name="GitHub" added={added} onPress={() => setAdded(true)} />} />
        <Tile title="Linear" detail="Issues and cycles." meta="Official" mark={<Mark letter="L" />} onOpen={() => {}} action={<Add name="Linear" added onPress={() => {}} />} />
        <Tile title="kms_secrets" detail="Read the names of an org’s secrets." mark={<BookOpen size={16} />} />
      </Tiles>
    </YStack>
  )
}

export function Feature() {
  return (
    <Featured
      title="Triage"
      detail="How we triage an issue: label it, size it, and say who owns it."
      meta="Written here · saved Sep 21, 2026"
      mark={<Mark letter="T" />}
      onOpen={() => {}}
      action={<Add name="Triage" added={false} onPress={() => {}} />}
    />
  )
}

Types

export interface TilesProps {
  /** Names the list — "Skills to add". */
  label: string
  /** Narrowest a column gets before the grid drops one, px. */
  min?: number
  children?: ReactNode
}

export interface TileProps {
  title: string
  /** A few lines about it; clamped at three. */
  detail?: string
  /** A quiet fact under them — where it comes from, when it was saved. */
  meta?: string
  /** Its picture, ~32px square. */
  mark?: ReactNode
  /** Its one control, at the top right — an `Add`, a switch. */
  action?: ReactNode
  /** Pressing the card. None, and the card is words only. */
  onOpen?: () => void
}

export interface FeaturedProps {
  title: string
  detail: string
  meta?: string
  mark: ReactNode
  action?: ReactNode
  onOpen: () => void
  /** The word over the title. */
  tag?: string
}

export interface AddProps {
  /** What is added — names the control ("Add git_repos") and the check. */
  name: string
  /** It is already yours: a check, not a control. */
  added: boolean
  /** A request is in flight. */
  busy?: boolean
  onPress: () => void
}

Exports