{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-table-12","type":"registry:block","title":"API keys table with permission badges and actions","description":"API keys table with permission badges and actions","dependencies":[],"registryDependencies":["@reui/badge","button","card","table"],"files":[{"path":"c-table-12.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\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 apiKeys = [\n  {\n    name: \"Production API\",\n    token: \"sk_live_••••••••4f3a\",\n    permissions: [\"read\", \"write\"],\n    lastUsed: \"2 minutes ago\",\n    status: \"Active\",\n    statusVariant: \"success-light\" as const,\n  },\n  {\n    name: \"Staging API\",\n    token: \"sk_test_••••••••8b2c\",\n    permissions: [\"read\", \"write\", \"admin\"],\n    lastUsed: \"1 hour ago\",\n    status: \"Active\",\n    statusVariant: \"success-light\" as const,\n  },\n  {\n    name: \"CI/CD Pipeline\",\n    token: \"sk_ci_••••••••1d9e\",\n    permissions: [\"read\"],\n    lastUsed: \"3 days ago\",\n    status: \"Active\",\n    statusVariant: \"success-light\" as const,\n  },\n  {\n    name: \"Legacy Integration\",\n    token: \"sk_old_••••••••7a5f\",\n    permissions: [\"read\", \"write\"],\n    lastUsed: \"30 days ago\",\n    status: \"Expired\",\n    statusVariant: \"destructive-light\" as const,\n  },\n]\n\nconst permissionVariant: Record<\n  string,\n  \"outline\" | \"info-light\" | \"warning-light\"\n> = {\n  read: \"outline\",\n  write: \"info-light\",\n  admin: \"warning-light\",\n}\n\nexport function Pattern() {\n  return (\n    <Card className=\"mx-auto flex w-full max-w-2xl p-0\">\n      <CardContent className=\"p-0\">\n        <Table>\n          <TableHeader>\n            <TableRow>\n              <TableHead>Name</TableHead>\n              <TableHead>Key</TableHead>\n              <TableHead>Permissions</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead className=\"text-right\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {apiKeys.map((key) => (\n              <TableRow key={key.name}>\n                <TableCell>\n                  <div className=\"flex flex-col\">\n                    <span className=\"text-sm font-medium\">{key.name}</span>\n                    <span className=\"text-muted-foreground text-xs\">\n                      Last used: {key.lastUsed}\n                    </span>\n                  </div>\n                </TableCell>\n                <TableCell>\n                  <code className=\"bg-muted rounded px-1.5 py-0.5 font-mono text-xs\">\n                    {key.token}\n                  </code>\n                </TableCell>\n                <TableCell>\n                  <div className=\"flex gap-1\">\n                    {key.permissions.map((perm) => (\n                      <Badge\n                        key={perm}\n                        variant={permissionVariant[perm] ?? \"outline\"}\n                        size=\"xs\"\n                      >\n                        {perm}\n                      </Badge>\n                    ))}\n                  </div>\n                </TableCell>\n                <TableCell>\n                  <Badge variant={key.statusVariant} size=\"sm\">\n                    {key.status}\n                  </Badge>\n                </TableCell>\n                <TableCell className=\"text-right\">\n                  <div className=\"flex justify-end gap-1\">\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-7\">\n                      <IconPlaceholder\n                        lucide=\"CopyIcon\"\n                        tabler=\"IconCopy\"\n                        hugeicons=\"Copy01Icon\"\n                        phosphor=\"CopyIcon\"\n                        remixicon=\"RiFileCopyLine\"\n                        className=\"size-3.5\"\n                        aria-hidden=\"true\"\n                      />\n                      <span className=\"sr-only\">Copy key</span>\n                    </Button>\n                    <Button variant=\"ghost\" size=\"icon\" className=\"size-7\">\n                      <IconPlaceholder\n                        lucide=\"RotateCcwIcon\"\n                        tabler=\"IconRotate2\"\n                        hugeicons=\"Refresh04Icon\"\n                        phosphor=\"ArrowCounterClockwiseIcon\"\n                        remixicon=\"RiRestartLine\"\n                        className=\"size-3.5\"\n                        aria-hidden=\"true\"\n                      />\n                      <span className=\"sr-only\">Regenerate key</span>\n                    </Button>\n                  </div>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </CardContent>\n    </Card>\n  )\n}","target":"components/examples/c-table-12.tsx"}],"meta":{"order":12,"gridSize":1}}