Table

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

const apps = [
  { name: "Xcode", version: "17.1", size: "12,4 GB", kind: "Application" },
  { name: "Keynote", version: "14.4", size: "622 MB", kind: "Application" },
  { name: "Pixelmator Pro", version: "3.7", size: "811 MB", kind: "Application" },
  { name: "Final Cut Pro", version: "11.1", size: "4,6 GB", kind: "Application" },
  { name: "Numbers", version: "14.4", size: "498 MB", kind: "Application" },
]

export default function TableDemo() {
  return (
    <div className="w-full max-w-lg rounded-[12px] bg-mac-content p-2 shadow-[0_0_0_1px_var(--mac-grid)]">
      <Table>
        <TableCaption>Applications on Macintosh HD</TableCaption>
        <TableHeader>
          <TableRow>
            <TableHead>Name</TableHead>
            <TableHead>Version</TableHead>
            <TableHead className="text-right">Size</TableHead>
            <TableHead>Kind</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {apps.map((app, index) => (
            <TableRow key={app.name} data-state={index === 1 ? "selected" : undefined}>
              <TableCell>{app.name}</TableCell>
              <TableCell className="text-mac-label-secondary">{app.version}</TableCell>
              <TableCell className="text-right text-mac-label-secondary tabular-nums">{app.size}</TableCell>
              <TableCell className="text-mac-label-secondary">{app.kind}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  )
}