Status

import { Status } from '@hanzo/ui'

export function Variants() {
  return (
    <XStack flexWrap="wrap" gap="$3" items="center">
      <Status>Default</Status>
      <Status variant="success">Operational</Status>
      <Status variant="warning">Degraded</Status>
      <Status variant="error">Down</Status>
      <Status variant="info">Scheduled</Status>
      <Status variant="gray">Paused</Status>
    </XStack>
  )
}

export function NoDot() {
  return (
    <XStack gap="$3">
      <Status dot={false}>Draft</Status>
      <Status variant="success" dot={false}>
        Published
      </Status>
    </XStack>
  )
}

export function ServiceList() {
  const services = [
    { name: 'API', variant: 'success' as const, label: 'Operational' },
    { name: 'Queue', variant: 'warning' as const, label: 'Degraded' },
    { name: 'Search', variant: 'error' as const, label: 'Down' },
  ]

  return (
    <YStack gap="$2">
      {services.map((service) => (
        <XStack key={service.name} justify="space-between" width={220}>
          <SizableText size="$2">{service.name}</SizableText>
          <Status variant={service.variant}>{service.label}</Status>
        </XStack>
      ))}
    </YStack>
  )
}

Types

export type StatusVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'gray'

export type StatusProps = Omit<ComponentProps<typeof StatusFrame>, 'variant'> & {
  variant?: StatusVariant | null
  /** Show the leading dot. Defaults to true — the dot is the point of a status pill. */
  dot?: boolean
}

Exports