{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "market-table",
  "title": "Market Watchlist Table",
  "description": "A price watchlist with ticker tiles, signed 24h changes and seven-day inline sparklines.",
  "registryDependencies": [
    "@spectrumui/data-table"
  ],
  "files": [
    {
      "path": "components/spectrumui/blocks/tables/market-table.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table';\n\nfunction Sparkline({ points, up }: { points: number[]; up: boolean }) {\n  const max = Math.max(...points);\n  const min = Math.min(...points);\n  const path = points\n    .map(\n      (value, index) =>\n        `${((index / (points.length - 1)) * 62 + 1).toFixed(1)},${(\n          17 -\n          ((value - min) / (max - min || 1)) * 14\n        ).toFixed(1)}`,\n    )\n    .join(' ');\n\n  return (\n    <svg viewBox=\"0 0 64 20\" fill=\"none\" aria-hidden=\"true\" className=\"h-5 w-16\">\n      <polyline\n        points={path}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        className={\n          up ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'\n        }\n      />\n    </svg>\n  );\n}\n\nfunction DeltaChevron({ up, ...props }: { up: boolean } & React.SVGProps<SVGSVGElement>) {\n  return (\n    <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\" {...props}>\n      <path\n        transform={up ? 'rotate(180 12 12) translate(6, 7)' : 'translate(6, 7)'}\n        d=\"M4.869,9.631 C4.811,9.574 4.563,9.361 4.359,9.162 C3.076,7.997 0.976,4.958 0.335,3.367 C0.232,3.125 0.014,2.514 0,2.188 C0,1.875 0.072,1.577 0.218,1.293 C0.422,0.938 0.743,0.654 1.122,0.498 C1.385,0.397 2.172,0.242 2.186,0.242 C3.047,0.086 4.446,0 5.992,0 C7.465,0 8.807,0.086 9.681,0.213 C9.695,0.228 10.673,0.384 11.008,0.554 C11.62,0.867 12,1.478 12,2.132 L12,2.188 C11.985,2.614 11.605,3.509 11.591,3.509 C10.949,5.014 8.952,7.983 7.625,9.177 C7.625,9.177 7.284,9.513 7.071,9.659 C6.765,9.887 6.386,10 6.007,10 C5.584,10 5.19,9.872 4.869,9.631\"\n      />\n    </svg>\n  );\n}\n\ninterface Asset {\n  id: string;\n  symbol: string;\n  name: string;\n  price: number;\n  change: number;\n  trend: number[];\n  cap: string;\n}\n\nconst ASSETS: Asset[] = [\n  {\n    id: 'a1',\n    symbol: 'NVX',\n    name: 'Novex Systems',\n    price: 842.12,\n    change: 2.41,\n    trend: [64, 66, 65, 69, 72, 71, 76],\n    cap: '$2.08T',\n  },\n  {\n    id: 'a2',\n    symbol: 'HLO',\n    name: 'Helio Labs',\n    price: 214.55,\n    change: -1.18,\n    trend: [82, 79, 80, 76, 74, 75, 71],\n    cap: '$412B',\n  },\n  {\n    id: 'a3',\n    symbol: 'DRF',\n    name: 'Driftlab',\n    price: 96.4,\n    change: 5.62,\n    trend: [40, 42, 41, 47, 52, 55, 61],\n    cap: '$88B',\n  },\n  {\n    id: 'a4',\n    symbol: 'KEL',\n    name: 'Keelworks',\n    price: 47.83,\n    change: 0.34,\n    trend: [58, 57, 59, 58, 60, 59, 60],\n    cap: '$36B',\n  },\n  {\n    id: 'a5',\n    symbol: 'FRN',\n    name: 'Fernwerk AG',\n    price: 128.9,\n    change: -3.75,\n    trend: [77, 74, 75, 70, 66, 62, 58],\n    cap: '$54B',\n  },\n  {\n    id: 'a6',\n    symbol: 'CPL',\n    name: 'Copperline',\n    price: 12.06,\n    change: 1.02,\n    trend: [30, 31, 29, 33, 32, 35, 36],\n    cap: '$4.2B',\n  },\n];\n\nconst price = new Intl.NumberFormat('en-US', {\n  style: 'currency',\n  currency: 'USD',\n  minimumFractionDigits: 2,\n});\n\nconst columns: DataTableColumn<Asset>[] = [\n  {\n    id: 'symbol',\n    header: 'Asset',\n    sortable: true,\n    value: (row) => row.symbol,\n    cell: (row) => (\n      <span className=\"flex items-center gap-2.5\">\n        <span\n          aria-hidden=\"true\"\n          className=\"grid size-7 shrink-0 place-items-center rounded-full bg-neutral-900 font-mono text-[10px] font-medium text-neutral-100 dark:bg-neutral-100 dark:text-neutral-900\"\n        >\n          {row.symbol.slice(0, 2)}\n        </span>\n        <span className=\"min-w-0\">\n          <span className=\"block\">{row.symbol}</span>\n          <span className=\"block truncate text-xs font-normal text-neutral-500 dark:text-neutral-400\">\n            {row.name}\n          </span>\n        </span>\n      </span>\n    ),\n  },\n  {\n    id: 'price',\n    header: 'Price',\n    sortable: true,\n    numeric: true,\n    value: (row) => row.price,\n    cell: (row) => (\n      <span className=\"font-medium text-neutral-900 dark:text-neutral-100\">\n        {price.format(row.price)}\n      </span>\n    ),\n  },\n  {\n    id: 'change',\n    header: '24h',\n    sortable: true,\n    numeric: true,\n    value: (row) => row.change,\n    cell: (row) => (\n      <span\n        className={`inline-flex items-center gap-1 font-medium tabular-nums ${\n          row.change >= 0\n            ? 'text-emerald-700 dark:text-emerald-300'\n            : 'text-rose-700 dark:text-rose-300'\n        }`}\n      >\n        <DeltaChevron up={row.change >= 0} className=\"size-3\" />\n        {Math.abs(row.change).toFixed(2)}%\n      </span>\n    ),\n  },\n  {\n    id: 'trend',\n    header: 'Last 7 days',\n    align: 'end',\n    hideBelow: 'sm',\n    value: (row) => row.change,\n    cell: (row) => (\n      <span className=\"inline-flex justify-end\">\n        <Sparkline points={row.trend} up={row.trend[row.trend.length - 1] >= row.trend[0]} />\n      </span>\n    ),\n  },\n  { id: 'cap', header: 'Market cap', numeric: true, hideBelow: 'md', value: (row) => row.cap },\n];\n\nexport function MarketTable({ variant = 'Comfortable' }: { variant?: 'Comfortable' | 'Dense' }) {\n  return (\n    <div className=\"mx-auto w-full max-w-3xl px-4 py-10 sm:px-6\">\n      <DataTable\n        data={ASSETS}\n        columns={columns}\n        rowId={(row) => row.id}\n        rowLabel={(row) => row.name}\n        caption=\"Watchlist with live prices, 24-hour change and a seven-day sparkline.\"\n        variant=\"minimal\"\n        density={variant === 'Dense' ? 'compact' : 'default'}\n        title=\"Watchlist\"\n      />\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/spectrumui/blocks/tables/market-table.tsx"
    }
  ],
  "type": "registry:block"
}