50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1597,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; function Sparkline({ points, up }: { points: number[]; up: boolean }) { const max = Math.max(...points); const min = Math.min(...points); const path = points .map( (value, index) => `${((index / (points.length - 1)) * 62 + 1).toFixed(1)},${( 17 - ((value - min) / (max - min || 1)) * 14 ).toFixed(1)}`, ) .join(' '); return ( ); } function DeltaChevron({ up, ...props }: { up: boolean } & React.SVGProps) { return ( ); } interface Asset { id: string; symbol: string; name: string; price: number; change: number; trend: number[]; cap: string; } const ASSETS: Asset[] = [ { id: 'a1', symbol: 'NVX', name: 'Novex Systems', price: 842.12, change: 2.41, trend: [64, 66, 65, 69, 72, 71, 76], cap: '$2.08T', }, { id: 'a2', symbol: 'HLO', name: 'Helio Labs', price: 214.55, change: -1.18, trend: [82, 79, 80, 76, 74, 75, 71], cap: '$412B', }, { id: 'a3', symbol: 'DRF', name: 'Driftlab', price: 96.4, change: 5.62, trend: [40, 42, 41, 47, 52, 55, 61], cap: '$88B', }, { id: 'a4', symbol: 'KEL', name: 'Keelworks', price: 47.83, change: 0.34, trend: [58, 57, 59, 58, 60, 59, 60], cap: '$36B', }, { id: 'a5', symbol: 'FRN', name: 'Fernwerk AG', price: 128.9, change: -3.75, trend: [77, 74, 75, 70, 66, 62, 58], cap: '$54B', }, { id: 'a6', symbol: 'CPL', name: 'Copperline', price: 12.06, change: 1.02, trend: [30, 31, 29, 33, 32, 35, 36], cap: '$4.2B', }, ]; const price = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, }); const columns: DataTableColumn[] = [ { id: 'symbol', header: 'Asset', sortable: true, value: (row) => row.symbol, cell: (row) => ( {row.symbol} {row.name} ), }, { id: 'price', header: 'Price', sortable: true, numeric: true, value: (row) => row.price, cell: (row) => ( {price.format(row.price)} ), }, { id: 'change', header: '24h', sortable: true, numeric: true, value: (row) => row.change, cell: (row) => ( = 0 ? 'text-emerald-700 dark:text-emerald-300' : 'text-rose-700 dark:text-rose-300' }`} > = 0} className="size-3" /> {Math.abs(row.change).toFixed(2)}% ), }, { id: 'trend', header: 'Last 7 days', align: 'end', hideBelow: 'sm', value: (row) => row.change, cell: (row) => ( = row.trend[0]} /> ), }, { id: 'cap', header: 'Market cap', numeric: true, hideBelow: 'md', value: (row) => row.cap }, ]; export function MarketTable({ variant = 'Comfortable' }: { variant?: 'Comfortable' | 'Dense' }) { return (

row.id} rowLabel={(row) => row.name} caption="Watchlist with live prices, 24-hour change and a seven-day sparkline." variant="minimal" density={variant === 'Dense' ? 'compact' : 'default'} title="Watchlist" />

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/data-table"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/spectrumui/blocks/tables/market-table.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/tables/market-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]