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:T1eee,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; type IconProps = React.SVGProps; function IconShield(props: IconProps) { return ( ); } function IconMore(props: IconProps) { return ( ); } type Role = 'Owner' | 'Admin' | 'Editor' | 'Viewer'; interface Member { id: string; name: string; email: string; avatar: string; role: Role; twoFactor: boolean; lastActive: string; } const MEMBERS: Member[] = [ { id: 'u1', name: 'Freya Lindgren', email: 'freya@driftlab.se', avatar: '/avatars/people/01.jpg', role: 'Owner', twoFactor: true, lastActive: 'Now', }, { id: 'u2', name: 'Mateo Alvarez', email: 'mateo@driftlab.se', avatar: '/avatars/people/03.jpg', role: 'Admin', twoFactor: true, lastActive: '5 min ago', }, { id: 'u3', name: 'Aiko Watanabe', email: 'aiko@driftlab.se', avatar: '/avatars/people/06.jpg', role: 'Editor', twoFactor: true, lastActive: '1 hour ago', }, { id: 'u4', name: 'Jonas Keller', email: 'jonas@driftlab.se', avatar: '/avatars/people/09.jpg', role: 'Editor', twoFactor: false, lastActive: 'Yesterday', }, { id: 'u5', name: 'Zara Osei', email: 'zara@driftlab.se', avatar: '/avatars/people/12.jpg', role: 'Editor', twoFactor: true, lastActive: '2 days ago', }, { id: 'u6', name: 'Nils Bakker', email: 'nils@driftlab.se', avatar: '/avatars/people/13.jpg', role: 'Viewer', twoFactor: false, lastActive: 'Aug 30', }, { id: 'u7', name: 'Leila Haddad', email: 'leila@driftlab.se', avatar: '/avatars/people/05.jpg', role: 'Viewer', twoFactor: true, lastActive: 'Aug 27', }, ]; const ROLE_RANK: Record = { Owner: 0, Admin: 1, Editor: 2, Viewer: 3 }; const columns: DataTableColumn[] = [ { id: 'name', header: 'Member', sortable: true, value: (row) => row.name, cell: (row) => (

{/* eslint-disable-next-line @next/next/no-img-element */}

{row.name} {row.email}

), }, { id: 'role', header: 'Role', sortable: true, value: (row) => ROLE_RANK[row.role], cell: (row) => ( {row.role} ), }, { id: 'twoFactor', header: '2FA', sortable: true, hideBelow: 'sm', value: (row) => row.twoFactor, cell: (row) => row.twoFactor ? ( Enabled ) : ( Off ), }, { id: 'lastActive', header: 'Last active', hideBelow: 'md', value: (row) => row.lastActive, }, ]; export function TeamMembersTable({ variant = 'Comfortable', }: { variant?: 'Comfortable' | 'Compact'; }) { const [members, setMembers] = React.useState(MEMBERS); const removed = MEMBERS.length - members.length; return (

row.id} rowLabel={(row) => row.name} caption="Workspace members with role, two-factor status and last activity." density={variant === 'Compact' ? 'compact' : 'default'} title="Members" quickFilter={{ columnId: 'role', label: 'Filter by role', getValue: (row) => row.role, }} selectable defaultSort={{ columnId: 'role', direction: 'asc' }} onDelete={(ids) => setMembers((current) => current.filter((row) => !ids.includes(row.id)))} toolbar={ removed > 0 ? ( ) : null } rowActions={(row) => ( )} bulkActions={({ ids, remove }) => ( )} />

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