4f: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"] 50: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"] 51:T2036,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; type IconProps = React.SVGProps; function Glyph({ children, ...props }: IconProps) { return ( ); } function IconFolder(props: IconProps) { return ( ); } function IconPaper(props: IconProps) { return ( ); } function IconImage(props: IconProps) { return ( ); } function IconVideo(props: IconProps) { return ( ); } type Kind = 'folder' | 'doc' | 'image' | 'video'; interface Entry { id: string; name: string; kind: Kind; meta: string; size: number | null; shared: string[]; modified: string; } const ENTRIES: Entry[] = [ { id: 'e1', name: 'Brand refresh', kind: 'folder', meta: '24 items', size: null, shared: ['/avatars/people/01.jpg', '/avatars/people/03.jpg', '/avatars/people/06.jpg'], modified: 'Today', }, { id: 'e2', name: 'Q3 board deck.key', kind: 'doc', meta: 'Keynote', size: 48_400_000, shared: ['/avatars/people/01.jpg', '/avatars/people/05.jpg'], modified: 'Yesterday', }, { id: 'e3', name: 'hero-banner@2x.png', kind: 'image', meta: 'PNG · 2880×1620', size: 6_200_000, shared: ['/avatars/people/12.jpg'], modified: 'Sep 6', }, { id: 'e4', name: 'onboarding-walkthrough.mp4', kind: 'video', meta: 'MP4 · 4m 12s', size: 184_000_000, shared: ['/avatars/people/03.jpg', '/avatars/people/13.jpg'], modified: 'Sep 5', }, { id: 'e5', name: 'Pricing research', kind: 'folder', meta: '9 items', size: null, shared: ['/avatars/people/05.jpg'], modified: 'Sep 4', }, { id: 'e6', name: 'annual-report-draft.pdf', kind: 'doc', meta: 'PDF · 32 pages', size: 12_800_000, shared: [ '/avatars/people/01.jpg', '/avatars/people/06.jpg', '/avatars/people/08.jpg', '/avatars/people/12.jpg', ], modified: 'Sep 2', }, ]; const KIND_ICON: Record React.ReactElement> = { folder: (props) => , doc: (props) => , image: (props) => , video: (props) => , }; function formatSize(bytes: number | null) { if (bytes === null) return '—'; if (bytes >= 1_000_000_000) return `${(bytes / 1_000_000_000).toFixed(1)} GB`; if (bytes >= 1_000_000) return `${(bytes / 1_000_000).toFixed(1)} MB`; return `${Math.round(bytes / 1000)} KB`; } const columns: DataTableColumn[] = [ { id: 'name', header: 'Name', sortable: true, value: (row) => row.name, cell: (row) => ( {row.name} {row.meta} ), }, { id: 'size', header: 'Size', sortable: true, numeric: true, value: (row) => row.size ?? -1, cell: (row) => formatSize(row.size), }, { id: 'shared', header: 'Shared with', hideBelow: 'sm', value: (row) => String(row.shared.length), cell: (row) => ( {row.shared.slice(0, 4).map((avatar) => ( /* eslint-disable-next-line @next/next/no-img-element */

))} ), }, { id: 'modified', header: 'Modified', sortable: true, hideBelow: 'md', value: (row) => row.modified, }, ]; export function FilesTable({ variant = 'Comfortable' }: { variant?: 'Comfortable' | 'Compact' }) { return (

row.id} rowLabel={(row) => row.name} caption="Shared drive contents with file types, sizes and collaborators." density={variant === 'Compact' ? 'compact' : 'default'} variant="minimal" title="Shared drive" searchable searchPlaceholder="Search files" />

); } 4e:["$","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,["$","$L4f",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/data-table"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"components/spectrumui/blocks/tables/files-table.tsx","content":"$51","type":"registry:block","target":"components/spectrumui/blocks/tables/files-table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]