{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-table-13","type":"registry:block","title":"File manager table with owners and sharing badges","description":"File manager table with owners and sharing badges","dependencies":[],"registryDependencies":["avatar","@reui/badge","table"],"files":[{"path":"c-table-13.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst files = [\n  {\n    name: \"Q4 Financial Report.pdf\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"FileTextIcon\"\n        tabler=\"IconFileText\"\n        hugeicons=\"File02Icon\"\n        phosphor=\"FileTextIcon\"\n        remixicon=\"RiFileTextLine\"\n        className=\"text-muted-foreground size-4 shrink-0\"\n        aria-hidden=\"true\"\n      />\n    ),\n    size: \"2.4 MB\",\n    owner: \"Sarah Chen\",\n    ownerAvatar:\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80\",\n    sharing: \"Team\",\n    sharingVariant: \"info-light\" as const,\n    modified: \"2 hours ago\",\n  },\n  {\n    name: \"Brand Guidelines\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"FolderIcon\"\n        tabler=\"IconFolder\"\n        hugeicons=\"FolderIcon\"\n        phosphor=\"FolderIcon\"\n        remixicon=\"RiFolderLine\"\n        className=\"text-muted-foreground size-4 shrink-0\"\n        aria-hidden=\"true\"\n      />\n    ),\n    size: \"—\",\n    owner: \"Emily Park\",\n    ownerAvatar:\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=96&h=96&dpr=2&q=80\",\n    sharing: \"Public\",\n    sharingVariant: \"success-light\" as const,\n    modified: \"1 day ago\",\n  },\n  {\n    name: \"Product Roadmap 2025.xlsx\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"FileSpreadsheetIcon\"\n        tabler=\"IconFileSpreadsheet\"\n        hugeicons=\"GoogleSheetIcon\"\n        phosphor=\"FileTextIcon\"\n        remixicon=\"RiFileTextLine\"\n        className=\"text-muted-foreground size-4 shrink-0\"\n        aria-hidden=\"true\"\n      />\n    ),\n    size: \"856 KB\",\n    owner: \"Marcus Johnson\",\n    ownerAvatar:\n      \"https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=96&h=96&dpr=2&q=80\",\n    sharing: \"Private\",\n    sharingVariant: \"outline\" as const,\n    modified: \"3 days ago\",\n  },\n  {\n    name: \"App Screenshots\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"ImageIcon\"\n        tabler=\"IconPhoto\"\n        hugeicons=\"ImageIcon\"\n        phosphor=\"ImageIcon\"\n        remixicon=\"RiImageLine\"\n        className=\"text-muted-foreground size-4 shrink-0\"\n        aria-hidden=\"true\"\n      />\n    ),\n    size: \"48.2 MB\",\n    owner: \"David Kim\",\n    ownerAvatar:\n      \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=96&h=96&dpr=2&q=80\",\n    sharing: \"Team\",\n    sharingVariant: \"info-light\" as const,\n    modified: \"1 week ago\",\n  },\n  {\n    name: \"Architecture Diagram.fig\",\n    icon: (\n      <IconPlaceholder\n        lucide=\"PenToolIcon\"\n        tabler=\"IconEdit\"\n        hugeicons=\"PenTool03Icon\"\n        phosphor=\"PenNibIcon\"\n        remixicon=\"RiPenNibLine\"\n        className=\"text-muted-foreground size-4 shrink-0\"\n        aria-hidden=\"true\"\n      />\n    ),\n    size: \"12.8 MB\",\n    owner: \"Sofia Davis\",\n    ownerAvatar:\n      \"https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=96&h=96&dpr=2&q=80\",\n    sharing: \"Restricted\",\n    sharingVariant: \"warning-light\" as const,\n    modified: \"2 weeks ago\",\n  },\n]\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-2xl flex-col\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead>Name</TableHead>\n            <TableHead>Owner</TableHead>\n            <TableHead>Sharing</TableHead>\n            <TableHead>Size</TableHead>\n            <TableHead className=\"text-right\">Modified</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {files.map((file) => (\n            <TableRow key={file.name}>\n              <TableCell>\n                <div className=\"flex items-center gap-3\">\n                  {file.icon}\n                  <span className=\"text-sm font-medium\">{file.name}</span>\n                </div>\n              </TableCell>\n              <TableCell>\n                <div className=\"flex items-center gap-2\">\n                  <Avatar size=\"sm\">\n                    <AvatarImage src={file.ownerAvatar} alt={file.owner} />\n                    <AvatarFallback>\n                      {file.owner\n                        .split(\" \")\n                        .map((n) => n[0])\n                        .join(\"\")}\n                    </AvatarFallback>\n                  </Avatar>\n                  <span className=\"text-sm\">{file.owner}</span>\n                </div>\n              </TableCell>\n              <TableCell>\n                <Badge variant={file.sharingVariant} size=\"sm\">\n                  {file.sharing}\n                </Badge>\n              </TableCell>\n              <TableCell className=\"text-muted-foreground text-sm\">\n                {file.size}\n              </TableCell>\n              <TableCell className=\"text-muted-foreground text-right text-sm\">\n                {file.modified}\n              </TableCell>\n            </TableRow>\n          ))}\n        </TableBody>\n      </Table>\n    </div>\n  )\n}","target":"components/examples/c-table-13.tsx"}],"meta":{"order":13,"gridSize":1}}