Timeline

import { Timeline } from '@hanzo/ui'

export function Default() {
  return <Timeline items={milestones} />
}

export function Horizontal() {
  return <Timeline items={milestones} orientation="horizontal" />
}

export function Alternate() {
  return <Timeline items={milestones} variant="alternate" />
}

export function Variants() {
  const withContent: TimelineItem[] = [
    {
      id: "1",
      title: "Version 1.0 released",
      description: "Initial release with core features",
      date: "Jan 1, 2024",
      status: "completed",
      content: (
        <XStack gap="$2">
          <Badge>Core</Badge>
          <Badge variant="secondary">Stable</Badge>
        </XStack>
      ),
    },
    { id: "2", title: "Version 2.0 beta", description: "Major update", date: "Feb 15, 2024", status: "active" },
  ]

  return (
    <YStack gap="$8">
      <Timeline items={milestones} variant="compact" />
      <Timeline items={withContent} variant="simple" />
    </YStack>
  )
}

Types

export type TimelineStatus = 'completed' | 'active' | 'pending'

export type TimelineOrientation = 'vertical' | 'horizontal'

export type TimelineVariant = 'default' | 'alternate' | 'compact' | 'simple'

export interface TimelineItem {
  id: string
  title: string
  description?: string
  date?: string
  time?: string
  status?: TimelineStatus
  icon?: React.ReactNode
  content?: React.ReactNode
}

export interface TimelineProps extends Omit<YStackProps, 'children' | 'items'> {
  items: TimelineItem[]
  orientation?: TimelineOrientation
  variant?: TimelineVariant
  /** Reveal rows as they scroll into view. Defaults to true. */
  animated?: boolean
}

Exports