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:T11b0,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; function DeltaChevron({ up, ...props }: { up: boolean } & React.SVGProps) { return ( ); } interface Page { id: string; path: string; visitors: number; change: number; avgTime: string; } const PAGES: Page[] = [ { id: 'p1', path: '/', visitors: 48210, change: 12.4, avgTime: '1m 42s' }, { id: 'p2', path: '/pricing', visitors: 19340, change: 8.1, avgTime: '2m 08s' }, { id: 'p3', path: '/docs/getting-started', visitors: 12880, change: -3.2, avgTime: '4m 31s' }, { id: 'p4', path: '/blog/launch-week-recap', visitors: 9640, change: 64.9, avgTime: '3m 12s' }, { id: 'p5', path: '/changelog', visitors: 5220, change: 4.6, avgTime: '1m 05s' }, { id: 'p6', path: '/docs/api/webhooks', visitors: 3980, change: -1.8, avgTime: '5m 44s' }, { id: 'p7', path: '/templates', visitors: 2410, change: 22.7, avgTime: '2m 51s' }, ]; const MAX_VISITORS = Math.max(...PAGES.map((page) => page.visitors)); function buildColumns(bars: boolean): DataTableColumn[] { return [ { id: 'path', header: 'Page', sortable: true, value: (row) => row.path, cell: (row) => {row.path}, }, { id: 'visitors', header: 'Visitors', sortable: true, numeric: true, value: (row) => row.visitors, formatTotal: (sum) => Math.round(sum).toLocaleString('en-US'), cell: (row) => bars ? ( ) : ( {row.visitors.toLocaleString('en-US')} ), }, { id: 'change', header: 'Change', 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(1)}% ), }, { id: 'avgTime', header: 'Avg. time', numeric: true, hideBelow: 'sm', value: (row) => row.avgTime, }, ]; } export function TopPagesTable({ variant = 'Bars' }: { variant?: 'Bars' | 'Plain' }) { const columns = React.useMemo(() => buildColumns(variant === 'Bars'), [variant]); return (

row.id} rowLabel={(row) => row.path} caption="Most visited pages in the last 30 days, with share bars and week-over-week change." variant="minimal" density="compact" title="Top pages" totals={['visitors']} defaultSort={{ columnId: 'visitors', direction: 'desc' }} />

); } 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/top-pages-table.tsx","content":"$52","type":"registry:block","target":"components/spectrumui/blocks/tables/top-pages-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]