Table

import { Status } from "@/components/ui/status"
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table"

const scenes = [
  { name: "Portfolio Street", lamps: 14, frames: 6, tone: "ok" },
  { name: "Kinselas", lamps: 9, frames: 12, tone: "ok" },
  { name: "The garden", lamps: 22, frames: 4, tone: "warn" },
  { name: "The factory", lamps: 31, frames: 8, tone: "idle" },
] as const

export default function TableDemo() {
  return (
    <Table className="mx-auto w-96 max-w-full">
      <TableHeader>
        <TableRow>
          <TableHead>Scene</TableHead>
          <TableHead className="text-right">Lamps</TableHead>
          <TableHead className="text-right">Frames</TableHead>
          <TableHead />
        </TableRow>
      </TableHeader>
      <TableBody>
        {scenes.map((scene) => (
          <TableRow key={scene.name}>
            <TableCell>{scene.name}</TableCell>
            <TableCell numeric>{scene.lamps}</TableCell>
            <TableCell numeric>{scene.frames}</TableCell>
            <TableCell className="text-right">
              <Status tone={scene.tone} label={scene.tone} />
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  )
}