Status

import { StatusBadge, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, type StatusTone } from 'ferry-ui'

type InvoiceStatus = 'paid' | 'open' | 'overdue'

// One map from the statuses of your domain to a tone and a label.
const INVOICE_STATUS: Record<InvoiceStatus, { tone: StatusTone; label: string }> = {
  paid: { tone: 'success', label: 'Paid' },
  open: { tone: 'info', label: 'Open' },
  overdue: { tone: 'destructive', label: 'Overdue' },
}

const INVOICES: { number: string; customer: string; status: InvoiceStatus }[] = [
  { number: 'INV-2041', customer: 'Acme', status: 'paid' },
  { number: 'INV-2042', customer: 'Globex', status: 'open' },
  { number: 'INV-2043', customer: 'Northwind Traders', status: 'overdue' },
]

export default function StatusHero() {
  return (
    <Table aria-label="Invoices">
      <TableHeader>
        <TableRow className="hover:bg-transparent">
          <TableHead>Invoice</TableHead>
          <TableHead>Customer</TableHead>
          <TableHead>Status</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {INVOICES.map((invoice) => (
          <TableRow key={invoice.number}>
            <TableCell className="font-mono text-[13px]">{invoice.number}</TableCell>
            <TableCell>{invoice.customer}</TableCell>
            <TableCell>
              <StatusBadge {...INVOICE_STATUS[invoice.status]} />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}

import { STATUS_TONES, StatusBadge, type StatusTone } from 'ferry-ui'

const LABELS: Record<StatusTone, string> = {
  success: 'Active',
  warning: 'Past due',
  destructive: 'Failed',
  info: 'In review',
  neutral: 'Draft',
}

export default function StatusTones() {
  return (
    <>
      {STATUS_TONES.map((tone) => (
        <StatusBadge key={tone} tone={tone} label={LABELS[tone]} />
      ))}
    </>
  )
}

import { StatusBadge } from 'ferry-ui'

export default function StatusSizes() {
  return (
    <div className="flex flex-col gap-4">
      <StatusBadge tone="success" label="Active" />
      <div className="flex items-center gap-2">
        <span className="text-base font-medium text-foreground">Billing portal</span>
        <StatusBadge tone="success" label="Active" size="sm" />
      </div>
    </div>
  )
}

import * as React from 'react'
import { Button, StatusBadge } from 'ferry-ui'

export default function StatusPulse() {
  const [running, setRunning] = React.useState(true)

  return (
    <>
      {running ? (
        <StatusBadge tone="info" label="Running" pulse />
      ) : (
        <StatusBadge tone="neutral" label="Stopped" />
      )}
      <Button size="tiny" onClick={() => setRunning((value) => !value)}>
        {running ? 'Stop the import' : 'Start the import'}
      </Button>
    </>
  )
}

import { StatusBadge } from 'ferry-ui'
import { CreditCard, Lock, ShieldAlert } from 'lucide-react'

export default function StatusIcon() {
  return (
    <>
      <StatusBadge tone="destructive" icon={<ShieldAlert />} label="Blocked" />
      <StatusBadge tone="neutral" icon={<Lock />} label="Private" />
      <StatusBadge tone="warning" icon={<CreditCard />} label="Card expires" dot />
      <StatusBadge tone="neutral" label="Draft" dot={false} />
    </>
  )
}

import { StatusDot } from 'ferry-ui'

export default function StatusDots() {
  return (
    <ul className="flex flex-col gap-2 text-[13px] text-foreground-light">
      <li className="flex items-center gap-2">
        <StatusDot tone="success" /> 3 endpoints online
      </li>
      <li className="flex items-center gap-2">
        <StatusDot tone="info" pulse /> Live updates on
      </li>
      <li className="flex items-center gap-2">
        {/* No text names the state: the dot needs a label. */}
        <StatusDot tone="destructive" label="Offline" />
        <span className="font-mono">orders-webhook</span>
      </li>
    </ul>
  )
}

import { StatusLine } from 'ferry-ui'
import { Pause } from 'lucide-react'

export default function StatusLines() {
  return (
    <div className="flex flex-col gap-3">
      <StatusLine tone="success">Workspace is active</StatusLine>
      <StatusLine tone="warning">Usage is above 90% of the plan</StatusLine>
      <StatusLine tone="destructive">Payment failed</StatusLine>
      <StatusLine tone="info" spin>
        Import of contacts in progress
      </StatusLine>
      <StatusLine tone="neutral" icon={<Pause />}>
        Subscription is on hold
      </StatusLine>
    </div>
  )
}

import * as React from 'react'
import { StatusDot, cn, statusBadgeVariants, type StatusTone } from 'ferry-ui'

const FILTERS: { tone: StatusTone; label: string }[] = [
  { tone: 'success', label: 'Paid' },
  { tone: 'warning', label: 'Overdue' },
  { tone: 'destructive', label: 'Failed' },
]

export default function StatusVariants() {
  const [active, setActive] = React.useState<StatusTone | null>('success')

  return (
    <div role="group" aria-label="Filter invoices by status" className="flex flex-wrap items-center gap-2">
      {FILTERS.map(({ tone, label }) => {
        const pressed = active === tone
        return (
          <button
            key={tone}
            type="button"
            aria-pressed={pressed}
            onClick={() => setActive(pressed ? null : tone)}
            className={cn(
              statusBadgeVariants({ tone: pressed ? tone : 'neutral' }),
              'cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring',
            )}
          >
            <StatusDot tone={tone} />
            {label}
          </button>
        )
      })}
    </div>
  )
}