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:T1b8f,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; function IconStar(props: React.SVGProps) { return ( ); } function DeltaChevron({ up, ...props }: { up: boolean } & React.SVGProps) { return ( ); } interface Player { id: string; rank: number; name: string; handle: string; avatar: string; score: number; streak: number; moved: number; } const PLAYERS: Player[] = [ { id: 'l1', rank: 1, name: 'Aiko Watanabe', handle: '@aiko', avatar: '/avatars/people/06.jpg', score: 12840, streak: 21, moved: 0, }, { id: 'l2', rank: 2, name: 'Mateo Alvarez', handle: '@mateo', avatar: '/avatars/people/03.jpg', score: 11960, streak: 14, moved: 2, }, { id: 'l3', rank: 3, name: 'Freya Lindgren', handle: '@freya', avatar: '/avatars/people/01.jpg', score: 11205, streak: 9, moved: -1, }, { id: 'l4', rank: 4, name: 'Zara Osei', handle: '@zara', avatar: '/avatars/people/12.jpg', score: 9871, streak: 17, moved: 1, }, { id: 'l5', rank: 5, name: 'Tomas Vega', handle: '@tomas', avatar: '/avatars/people/08.jpg', score: 9412, streak: 4, moved: -2, }, { id: 'l6', rank: 6, name: 'Leila Haddad', handle: '@leila', avatar: '/avatars/people/05.jpg', score: 8730, streak: 11, moved: 0, }, { id: 'l7', rank: 7, name: 'Nils Bakker', handle: '@nils', avatar: '/avatars/people/13.jpg', score: 8104, streak: 2, moved: 3, }, ]; const MEDAL: Record = { 1: 'bg-amber-50 text-amber-700 ring-amber-600/25 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-300/25', 2: 'bg-neutral-100 text-neutral-600 ring-neutral-500/20 dark:bg-neutral-100/10 dark:text-neutral-300 dark:ring-white/15', 3: 'bg-orange-50 text-orange-700 ring-orange-600/20 dark:bg-orange-400/10 dark:text-orange-300 dark:ring-orange-300/25', }; const columns: DataTableColumn[] = [ { id: 'rank', header: '#', sortable: true, numeric: true, align: 'center', width: 56, value: (row) => row.rank, cell: (row) => row.rank <= 3 ? ( {row.rank} ) : ( {row.rank} ), }, { id: 'name', header: 'Player', sortable: true, value: (row) => row.name, cell: (row) => ( {/* eslint-disable-next-line @next/next/no-img-element */}

{row.name} {row.handle} ), }, { id: 'score', header: 'Score', sortable: true, numeric: true, value: (row) => row.score, cell: (row) => ( {row.score.toLocaleString('en-US')} ), }, { id: 'streak', header: 'Streak', sortable: true, numeric: true, hideBelow: 'sm', value: (row) => row.streak, cell: (row) => ( {row.streak} days ), }, { id: 'moved', header: 'This week', numeric: true, hideBelow: 'md', value: (row) => row.moved, cell: (row) => row.moved === 0 ? ( — ) : ( 0 ? 'text-emerald-700 dark:text-emerald-300' : 'text-rose-700 dark:text-rose-300' }`} > 0} className="size-3" /> {Math.abs(row.moved)} ), }, ]; export function LeaderboardTable({ variant = 'Comfortable', }: { variant?: 'Comfortable' | 'Striped'; }) { return (

row.id} rowLabel={(row) => row.name} caption="Weekly leaderboard with rank medals, scores, streaks and movement." variant={variant === 'Striped' ? 'striped' : 'panel'} title="Leaderboard" defaultSort={{ columnId: 'rank', direction: 'asc' }} />

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