@siyahi/ui 0.1.9-next.3 → 0.1.9-next.31

package/agents/examples/chart-line.tsx

@@ -0,0 +1,57 @@
+import { useState } from "react";
+import { LineChartCard, ToggleGroup, ToggleGroupItem, useFormat, type ChartSeries } from "@siyahi/ui";
+
+const cumulative = [
+  { month: "May", store: 0.012, category: 0.008 },
+  { month: "Jun", store: 0.021, category: 0.015 },
+  { month: "Jul", store: 0.034, category: 0.029 },
+  { month: "Aug", store: -0.006, category: 0.004 },
+  { month: "Sep", store: 0.041, category: 0.031 },
+  { month: "Oct", store: 0.052, category: 0.036 },
+];
+
+const monthly = [
+  { month: "May", store: 0.012, category: 0.008 },
+  { month: "Jun", store: 0.009, category: 0.007 },
+  { month: "Jul", store: 0.013, category: 0.014 },
+  { month: "Aug", store: -0.039, category: -0.024 },
+  { month: "Sep", store: 0.047, category: 0.027 },
+  { month: "Oct", store: 0.011, category: 0.005 },
+];
+
+const series: ChartSeries<(typeof cumulative)[number]> = [
+  { key: "store", label: "Our store", color: "var(--chart-1)" },
+  { key: "category", label: "Category average", color: "var(--chart-2)" },
+];
+
+export default function ChartLineExample() {
+  const { pct } = useFormat();
+  const [mode, setMode] = useState("cumulative");
+  return (
+    <LineChartCard
+      title="Sales growth against the category"
+      description={mode === "cumulative" ? "Cumulative, from the start of May" : "Each month on its own"}
+      action={
+        <ToggleGroup
+          value={[mode]}
+          onValueChange={([next]) => {
+            // Pressing the selected mode again would leave none selected; keep it.
+            if (next) setMode(next);
+          }}
+          variant="outline"
+          size="sm"
+          aria-label="Mode"
+        >
+          <ToggleGroupItem value="cumulative">Cumulative growth</ToggleGroupItem>
+          <ToggleGroupItem value="monthly">Monthly growth</ToggleGroupItem>
+        </ToggleGroup>
+      }
+      data={mode === "cumulative" ? cumulative : monthly}
+      xKey="month"
+      series={series}
+      // A formatter goes in as it is: the card calls it with the value alone.
+      valueFormatter={pct}
+      height={256}
+    />
+  );
+}

package/agents/examples/chart-panels.tsx

@@ -0,0 +1,94 @@
+import { AreaChartCard, BarChartCard, LineChartCard, PanelGrid, useFormat, type ChartSeries } from "@siyahi/ui";
+
+// Month-end growth of five funds; November and December are a forecast.
+const growth = [
+  { month: "May", nifty: 0, flexi: 0, gold: 0, debt: 0, small: 0 },
+  { month: "Jun", nifty: 0.025, flexi: 0.018, gold: 0.041, debt: 0.006, small: 0.034 },
+  { month: "Jul", nifty: 0.061, flexi: 0.049, gold: 0.072, debt: 0.013, small: 0.012 },
+  { month: "Aug", nifty: 0.047, flexi: 0.058, gold: 0.118, debt: 0.02, small: -0.041 },
+  { month: "Sep", nifty: 0.11, flexi: 0.094, gold: 0.153, debt: 0.027, small: -0.018 },
+  { month: "Oct", nifty: 0.156, flexi: 0.141, gold: 0.196, debt: 0.034, small: -0.052 },
+  { month: "Nov", nifty: 0.177, flexi: 0.166, gold: 0.221, debt: 0.043, small: -0.04 },
+  { month: "Dec", nifty: 0.202, flexi: 0.189, gold: 0.245, debt: 0.052, small: -0.031 },
+];
+const funds: ChartSeries<(typeof growth)[number]> = [
+  { key: "nifty", label: "Nifty 50", color: "var(--chart-1)" },
+  { key: "flexi", label: "Flexi cap", color: "var(--chart-2)" },
+  { key: "gold", label: "Gold", color: "var(--chart-3)" },
+  { key: "debt", label: "Debt", color: "var(--chart-4)" },
+  { key: "small", label: "Small cap", color: "var(--chart-5)" },
+];
+
+const value = [
+  { month: "May", equity: 2150000, debt: 600000, gold: 320000, intl: 390000, cash: 150000 },
+  { month: "Jun", equity: 2230000, debt: 612000, gold: 334000, intl: 402000, cash: 160000 },
+  { month: "Jul", equity: 2390000, debt: 625000, gold: 352000, intl: 421000, cash: 172000 },
+  { month: "Aug", equity: 2310000, debt: 637000, gold: 371000, intl: 447000, cash: 185000 },
+  { month: "Sep", equity: 2620000, debt: 648000, gold: 390000, intl: 462000, cash: 198000 },
+  { month: "Oct", equity: 2800000, debt: 655000, gold: 410500, intl: 486300, cash: 212000 },
+];
+const added = [
+  { quarter: "Q1", equity: 180000, debt: 60000, gold: 20000, intl: 40000, cash: 25000 },
+  { quarter: "Q2", equity: 220000, debt: 40000, gold: 45000, intl: 35000, cash: 15000 },
+  { quarter: "Q3", equity: 150000, debt: 80000, gold: 30000, intl: 55000, cash: 30000 },
+  { quarter: "Q4", equity: 260000, debt: 50000, gold: 60000, intl: 70000, cash: 20000 },
+];
+const kinds = [
+  { key: "equity", label: "Equity", color: "var(--chart-1)" },
+  { key: "debt", label: "Debt", color: "var(--chart-2)" },
+  { key: "gold", label: "Gold", color: "var(--chart-3)" },
+  { key: "intl", label: "International", color: "var(--chart-4)" },
+  { key: "cash", label: "Cash", color: "var(--chart-5)" },
+] as const;
+
+// Four charts in a PanelGrid: lines named at their ends, a forecast after today, overlapping areas as lines, and bars
+// as tints inside full-colour edges, grouped and stacked.
+export default function ChartPanelsExample() {
+  const { pct, money, moneyCompact } = useFormat();
+  return (
+    <PanelGrid>
+      <LineChartCard
+        title="Growth by fund"
+        description="Since May, month-end; November and December are a forecast"
+        data={growth}
+        xKey="month"
+        series={funds}
+        today="Oct"
+        forecastFrom="Oct"
+        valueFormatter={pct}
+        height={256}
+      />
+      <AreaChartCard
+        title="Value by kind"
+        description="Month-end value of each kind of holding"
+        data={value}
+        xKey="month"
+        series={kinds}
+        valueFormatter={money}
+        yTickFormatter={moneyCompact}
+        height={256}
+      />
+      <BarChartCard
+        title="Money added by kind and quarter"
+        description="Side by side"
+        data={added}
+        xKey="quarter"
+        series={kinds}
+        valueFormatter={money}
+        yTickFormatter={moneyCompact}
+        height={256}
+      />
+      <BarChartCard
+        title="Money added by kind and quarter"
+        description="Stacked into the quarter's total"
+        data={added}
+        xKey="quarter"
+        series={kinds}
+        stacked
+        valueFormatter={money}
+        yTickFormatter={moneyCompact}
+        height={256}
+      />
+    </PanelGrid>
+  );
+}

package/agents/examples/code-block.tsx

@@ -0,0 +1,40 @@
+import {
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockHeader,
+  CodeBlockTitle,
+} from "@siyahi/ui";
+
+const CHECK = "openssl s_client -connect example.com:443 -servername example.com -showcerts </dev/null";
+
+const LOG = Array.from(
+  { length: 24 },
+  (_, i) =>
+    `19:${String(33 + Math.floor(i / 4)).padStart(2, "0")}:${String((i * 15) % 60).padStart(2, "0")}  memory.pressure some avg10=${(12 + i * 3.1).toFixed(2)}`,
+).join("\n");
+
+export default function CodeBlockExample() {
+  return (
+    <div className="flex flex-col gap-4">
+      <CodeBlock>
+        <CodeBlockHeader>
+          <CodeBlockTitle>Show the chain a server sends</CodeBlockTitle>
+          <CodeBlockActions>
+            <CodeBlockCopyButton value={CHECK} />
+          </CodeBlockActions>
+        </CodeBlockHeader>
+        <CodeBlockContent wrap>{CHECK}</CodeBlockContent>
+      </CodeBlock>
+      <CodeBlock size="sm">
+        <CodeBlockHeader>
+          <CodeBlockActions>
+            <CodeBlockCopyButton value={LOG} />
+          </CodeBlockActions>
+        </CodeBlockHeader>
+        <CodeBlockContent className="max-h-48">{LOG}</CodeBlockContent>
+      </CodeBlock>
+    </div>
+  );
+}

package/agents/examples/collapsible.tsx

@@ -0,0 +1,18 @@
+import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@siyahi/ui";
+import { ChevronsUpDownIcon } from "lucide-react";
+
+export default function CollapsibleExample() {
+  return (
+    <Collapsible className="flex max-w-sm flex-col gap-2">
+      <CollapsibleTrigger render={<Button variant="outline" className="w-fit" />}>
+        <ChevronsUpDownIcon />
+        How refunds are counted
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <p className="text-muted-foreground">
+          A refund comes off the month the order was placed in, not the month it was paid.
+        </p>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/agents/examples/command.tsx

@@ -0,0 +1,29 @@
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@siyahi/ui";
+import { ChartLineIcon, PackageIcon, UsersIcon } from "lucide-react";
+
+export default function CommandExample() {
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      <Command>
+        <CommandInput placeholder="Jump to a page" />
+        <CommandList>
+          <CommandEmpty>No page matches.</CommandEmpty>
+          <CommandGroup heading="Pages">
+            <CommandItem>
+              <PackageIcon />
+              Orders
+            </CommandItem>
+            <CommandItem>
+              <ChartLineIcon />
+              Revenue
+            </CommandItem>
+            <CommandItem>
+              <UsersIcon />
+              Customers
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </Command>
+    </div>
+  );
+}

package/agents/examples/context-menu.tsx

@@ -0,0 +1,17 @@
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@siyahi/ui";
+
+export default function ContextMenuExample() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger className="w-full">
+        <div className="flex h-24 items-center justify-center rounded-lg border border-dashed text-muted-foreground">
+          Right-click or long-press here
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Copy order number</ContextMenuItem>
+        <ContextMenuItem>Open order</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

package/agents/examples/copy-button.tsx

@@ -0,0 +1,8 @@
+import { CopyButton } from "@siyahi/ui";
+
+// Every command on a setup page, for a reader who wants them all at once.
+const ALL = ["brew install node@24", "corepack enable", "pnpm install"].join("\n");
+
+export default function CopyButtonExample() {
+  return <CopyButton value={ALL} label="Copy all" />;
+}

package/agents/examples/data-bar.tsx

@@ -0,0 +1,114 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataBar,
+  DataTable,
+  DataTableBody,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableSortHeader,
+  Sparkline,
+  useFormat,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Store {
+  store: string;
+  /** This month's sales, and their change on last month, in rupees; made-up figures. */
+  sales: number;
+  change: number;
+  /** Orders on each of the last ten days, oldest first. */
+  daily: number[];
+}
+
+const stores: Store[] = [
+  { store: "Delhi", sales: 276000, change: -18400, daily: [478, 474, 470, 471, 466, 463, 465, 461, 459, 460] },
+  { store: "Bengaluru", sales: 262500, change: 21300, daily: [312, 318, 326, 320, 331, 344, 339, 348, 352, 350] },
+  { store: "Chennai", sales: 258000, change: 44100, daily: [250, 262, 258, 271, 266, 280, 284, 279, 288, 290] },
+  { store: "Kolkata", sales: 255600, change: 12800, daily: [281, 282, 280, 283, 284, 283, 285, 284, 286, 284] },
+  { store: "Mumbai", sales: 224400, change: 30900, daily: [220, 234, 229, 241, 252, 248, 260, 255, 266, 270] },
+  { store: "Pune", sales: 166000, change: -2600, daily: [180, 172, 165, 170, 158, 150, 161, 155, 148, 150] },
+];
+
+// Each bar is a share of its column's largest figure, so the rows draw to one scale.
+const largestSales = Math.max(...stores.map((s) => s.sales));
+const largestChange = Math.max(...stores.map((s) => Math.abs(s.change)));
+
+function Money({ amount }: { amount: number }) {
+  return useFormat().money(amount);
+}
+
+// The formatters print a bare hyphen, so a change in plain text writes its own + or −.
+function SignedMoney({ amount }: { amount: number }) {
+  const sign = amount > 0 ? "+" : amount < 0 ? "\u2212" : "";
+  return `${sign}${useFormat().money(Math.abs(amount))}`;
+}
+
+const header = () => <DataTableSortHeader />;
+
+const columns: DataTableColumnDef<Store>[] = [
+  { accessorKey: "store", header, size: 120, meta: { label: "Store" } },
+  {
+    accessorKey: "sales",
+    header,
+    size: 170,
+    meta: { label: "Sales", variant: "number" },
+    cell: ({ row }) => (
+      <DataBar value={row.original.sales} max={largestSales}>
+        <Money amount={row.original.sales} />
+      </DataBar>
+    ),
+  },
+  {
+    accessorKey: "change",
+    header,
+    size: 170,
+    meta: { label: "Change on last month", variant: "number" },
+    cell: ({ row }) => (
+      <DataBar value={row.original.change} max={largestChange} tone="sign">
+        <SignedMoney amount={row.original.change} />
+      </DataBar>
+    ),
+  },
+  {
+    id: "daily",
+    header: "Last 10 days",
+    size: 110,
+    enableSorting: false,
+    cell: ({ row }) => {
+      const { daily } = row.original;
+      const rising = (daily.at(-1) ?? 0) >= (daily[0] ?? 0);
+      return (
+        <Sparkline
+          data={daily}
+          variant="line"
+          color={rising ? "var(--positive)" : "var(--negative)"}
+          animate={false}
+          className="h-5 w-20"
+        />
+      );
+    },
+  },
+];
+
+export default function DataBarExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Stores</CardTitle>
+        <CardDescription>Bars give each figure's size against the column's largest</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot data={stores} columns={columns} initialState={{ columnPinning: { start: ["store"], end: [] } }}>
+          <DataTable>
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/data-table-compact.tsx

@@ -0,0 +1,93 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  DataTableBody,
+  DataTableCompactColumnsToggle,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableRowCount,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  Delta,
+  useDataTable,
+  useFormat,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Product {
+  product: string;
+  category: string;
+  /** Units sold and revenue this month; change is the revenue against last week. Made-up figures. */
+  units: number;
+  revenue: number;
+  change: number;
+}
+
+const products: Product[] = [
+  { product: "Standing desk", category: "Furniture", units: 120, revenue: 224400, change: 0.018 },
+  { product: "Office chair", category: "Seating", units: 150, revenue: 262500, change: -0.006 },
+  { product: "Bookshelf", category: "Furniture", units: 40, revenue: 166000, change: 0.004 },
+  { product: "Dinner set", category: "Kitchen, Dining & Tableware", units: 600, revenue: 276000, change: -0.012 },
+];
+
+const header = () => <DataTableSortHeader />;
+
+// While the change column is hidden to fit, the week's change rides under the revenue it belongs to.
+function RevenueCell({ product }: { product: Product }) {
+  const format = useFormat();
+  const { compactColumns } = useDataTable<Product>();
+  if (!compactColumns?.hidden.has("change")) return format.money(product.revenue);
+  return (
+    <div className="flex flex-col items-end">
+      {format.money(product.revenue)}
+      <Delta value={product.change} />
+    </div>
+  );
+}
+
+const columns: DataTableColumnDef<Product>[] = [
+  { accessorKey: "product", header, size: 140, meta: { label: "Product", compact: true } },
+  { accessorKey: "category", header, size: 120, meta: { label: "Category" } },
+  { accessorKey: "units", header, size: 100, meta: { label: "Units", variant: "number" } },
+  {
+    accessorKey: "revenue",
+    header,
+    size: 140,
+    meta: { label: "Revenue", variant: "number", compact: true },
+    cell: ({ row }) => <RevenueCell product={row.original} />,
+  },
+  {
+    accessorKey: "change",
+    header,
+    size: 110,
+    meta: { label: "Change", variant: "number" },
+    cell: ({ row }) => <Delta value={row.original.change} />,
+  },
+];
+
+export default function DataTableCompactExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Revenue by product</CardTitle>
+        <CardDescription>This week's revenue for each product, with the change on last week</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot data={products} columns={columns}>
+          <DataTableToolbarSection>
+            <DataTableCompactColumnsToggle />
+            <DataTableRowCount unit="products" />
+          </DataTableToolbarSection>
+          <DataTable aria-label="Revenue by product">
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/data-table-filters.tsx

@@ -0,0 +1,103 @@
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  DataTableBody,
+  DataTableFacetedFilter,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableRowCount,
+  DataTableSearchFilter,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  useDataTable,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Order {
+  order: string;
+  status: string;
+  warehouse: string;
+}
+const data: Order[] = [
+  { order: "ORD-1042", status: "Out for delivery", warehouse: "Bhiwandi" },
+  { order: "ORD-1043", status: "Packed", warehouse: "Hosur" },
+  { order: "ORD-1044", status: "Out for delivery", warehouse: "Hosur" },
+];
+const header = () => <DataTableSortHeader />;
+const columns: DataTableColumnDef<Order>[] = [
+  { accessorKey: "order", header, size: 140, meta: { label: "Order" } },
+  { accessorKey: "status", header, meta: { label: "Status" } },
+  { accessorKey: "warehouse", header, meta: { label: "Warehouse" } },
+];
+
+function Filters() {
+  const { table, isCompact } = useDataTable<Order>();
+  const active = table.state.columnFilters.length;
+  const controls = (
+    <div className="flex flex-wrap gap-2">
+      <DataTableFacetedFilter accessorKey="status" title="Status" />
+      <DataTableFacetedFilter accessorKey="warehouse" title="Warehouse" />
+    </div>
+  );
+  if (!isCompact) return controls;
+  return (
+    <Sheet>
+      <SheetTrigger render={<Button variant="outline" size="sm" />}>Filters{active ? ` (${active})` : ""}</SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Order filters</SheetTitle>
+          <SheetDescription>Selections stay applied when this panel closes.</SheetDescription>
+        </SheetHeader>
+        <div className="overflow-y-auto px-4">{controls}</div>
+        <SheetFooter>
+          <Button variant="outline" disabled={!active} onClick={() => table.resetColumnFilters()}>
+            Clear filters
+          </Button>
+          <SheetClose render={<Button />}>Done</SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export default function DataTableFiltersExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Open orders</CardTitle>
+        <CardDescription>Orders packed or out for delivery, by warehouse</CardDescription>
+      </CardHeader>
+      <CardContent>
+        {/* The closed filter panel is absent at first render, so configure its features explicitly. */}
+        <DataTableRoot data={data} columns={columns} config={{ enableFilters: true, enableSorting: true }}>
+          <DataTableToolbarSection>
+            <DataTableSearchFilter
+              label="Search orders"
+              placeholder="Search orders…"
+              className="w-full flex-none sm:w-64"
+            />
+            <Filters />
+            <DataTableRowCount unit="orders" />
+          </DataTableToolbarSection>
+          <DataTable aria-label="Open orders">
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}

package/agents/examples/data-table.tsx

@@ -0,0 +1,96 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  DataTableBody,
+  DataTableFacetedFilter,
+  DataTableHeader,
+  DataTableRoot,
+  DataTableRowCount,
+  DataTableSearchFilter,
+  DataTableSortHeader,
+  DataTableToolbarSection,
+  Delta,
+  useFormat,
+  type DataTableColumnDef,
+} from "@siyahi/ui";
+
+interface Product {
+  product: string;
+  category: string;
+  /** Units sold and revenue this month; change is the revenue against last week. Made-up figures. */
+  units: number;
+  revenue: number;
+  change: number;
+}
+
+const products: Product[] = [
+  { product: "Standing desk", category: "Furniture", units: 120, revenue: 224400, change: 0.018 },
+  { product: "Office chair", category: "Seating", units: 150, revenue: 262500, change: -0.006 },
+  { product: "Bookshelf", category: "Furniture", units: 40, revenue: 166000, change: 0.004 },
+  { product: "Dinner set", category: "Kitchen, Dining & Tableware", units: 600, revenue: 276000, change: -0.012 },
+  { product: "Kids chair", category: "Seating", units: 200, revenue: 258000, change: 0.022 },
+  { product: "Desk lamp", category: "Lighting", units: 900, revenue: 255600, change: 0.009 },
+];
+
+// One click sorts largest (or Z) first; the title comes from meta.label.
+const header = () => <DataTableSortHeader />;
+
+function Money({ amount }: { amount: number }) {
+  return useFormat().money(amount);
+}
+
+const columns: DataTableColumnDef<Product>[] = [
+  { accessorKey: "product", header, size: 140, meta: { label: "Product" } },
+  { accessorKey: "category", header, size: 120, meta: { label: "Category" } },
+  { accessorKey: "units", header, size: 100, meta: { label: "Units", variant: "number" } },
+  {
+    accessorKey: "revenue",
+    header,
+    size: 140,
+    meta: { label: "Revenue", variant: "number" },
+    cell: ({ row }) => <Money amount={row.original.revenue} />,
+  },
+  {
+    accessorKey: "change",
+    header,
+    size: 110,
+    meta: { label: "Change", variant: "number" },
+    cell: ({ row }) => <Delta value={row.original.change} />,
+  },
+];
+
+export default function DataTableExample() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Products</CardTitle>
+        <CardDescription>This week's units and revenue for each product, with the change on last week</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <DataTableRoot
+          data={products}
+          columns={columns}
+          initialState={{ columnPinning: { start: ["product"], end: [] } }}
+        >
+          <DataTableToolbarSection>
+            <DataTableSearchFilter
+              placeholder="Search products…"
+              label="Filter products"
+              className="flex-none sm:w-64"
+            />
+            <DataTableFacetedFilter accessorKey="category" title="Category" />
+            <DataTableRowCount unit="products" />
+          </DataTableToolbarSection>
+          <DataTable aria-label="Products">
+            <DataTableHeader />
+            <DataTableBody />
+          </DataTable>
+        </DataTableRoot>
+      </CardContent>
+    </Card>
+  );
+}