import { Badge } from "@smartacteam/ambient-web/badge";
import { Table } from "@smartacteam/ambient-web/table";
const invoices = [
{
id: "inv-001",
customer: "Acme Analytics",
amount: "$4,500.00",
issued: "Jan 9, 2025",
status: "Paid",
statusVariant: "success",
},
{
id: "inv-002",
customer: "Northwind Security",
amount: "$12,240.00",
issued: "Jan 12, 2025",
status: "Processing",
statusVariant: "default",
},
{
id: "inv-003",
customer: "Lighthouse Labs",
amount: "$2,980.00",
issued: "Jan 14, 2025",
status: "Overdue",
statusVariant: "error",
},
] as const;
export function TableDemo() {
return (
<Table.Root>
<Table.Caption>Recent invoices</Table.Caption>
<Table.Header>
<Table.Row>
<Table.Head>Customer</Table.Head>
<Table.Head align="right">Amount</Table.Head>
<Table.Head>Issued</Table.Head>
<Table.Head>Status</Table.Head>
</Table.Row>
</Table.Header>
<Table.Body>
{invoices.map((invoice) => (
<Table.Row key={invoice.id} interactive>
<Table.Cell variant="header">{invoice.customer}</Table.Cell>
<Table.Cell align="right">{invoice.amount}</Table.Cell>
<Table.Cell>{invoice.issued}</Table.Cell>
<Table.Cell>
<Badge color={invoice.statusVariant}>{invoice.status}</Badge>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Cell colSpan={5} className="text-sm text-foreground-secondary">
Showing all {invoices.length} invoices
</Table.Cell>
</Table.Row>
</Table.Footer>
</Table.Root>
);
}