{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-table-17","type":"registry:block","title":"Vertical table with server configuration details","description":"Vertical table with server configuration details","dependencies":[],"registryDependencies":["@reui/badge","@reui/frame","table"],"files":[{"path":"c-table-17.tsx","type":"registry:block","content":"import { Badge } from \"@/components/reui/badge\"\nimport {\n  Frame,\n  FrameDescription,\n  FrameHeader,\n  FramePanel,\n  FrameTitle,\n} from \"@/components/reui/frame\"\n\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableRow,\n} from \"@/components/ui/table\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-lg flex-col\">\n      <Frame spacing=\"sm\">\n        <FrameHeader className=\"px-2!\">\n          <FrameTitle>Droplet Status</FrameTitle>\n          <FrameDescription>\n            Primary production server{\" \"}\n            <Badge variant=\"outline\" size=\"sm\">\n              prod-api-us-east-1\n            </Badge>\n          </FrameDescription>\n        </FrameHeader>\n        <FramePanel className=\"p-0!\">\n          <Table>\n            <TableBody>\n              <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n                <TableCell className=\"bg-muted/50 w-40 py-2 text-sm font-medium\">\n                  Status\n                </TableCell>\n                <TableCell className=\"py-2\">\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"relative flex size-2\">\n                      <span className=\"absolute inline-flex size-full animate-ping rounded-full bg-green-400 opacity-75\" />\n                      <span className=\"relative inline-flex size-2 rounded-full bg-green-500\" />\n                    </span>\n                    <span className=\"text-sm font-medium text-green-600 dark:text-green-400\">\n                      Operational\n                    </span>\n                  </div>\n                </TableCell>\n              </TableRow>\n              <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n                <TableCell className=\"bg-muted/50 py-2 text-sm font-medium\">\n                  Instance Type\n                </TableCell>\n                <TableCell className=\"py-2\">\n                  <span className=\"font-mono text-sm\">c6g.2xlarge</span>\n                </TableCell>\n              </TableRow>\n              <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n                <TableCell className=\"bg-muted/50 py-2 text-sm font-medium\">\n                  Region\n                </TableCell>\n                <TableCell className=\"py-2 text-sm\">\n                  US East (N. Virginia)\n                </TableCell>\n              </TableRow>\n              <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n                <TableCell className=\"bg-muted/50 py-2 text-sm font-medium\">\n                  CPU Usage\n                </TableCell>\n                <TableCell className=\"py-2\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"bg-muted h-2 w-24 overflow-hidden rounded-full\">\n                      <div\n                        className=\"bg-primary h-full rounded-full\"\n                        style={{ width: \"42%\" }}\n                      />\n                    </div>\n                    <span className=\"text-muted-foreground text-sm\">42%</span>\n                  </div>\n                </TableCell>\n              </TableRow>\n              <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n                <TableCell className=\"bg-muted/50 py-2 text-sm font-medium\">\n                  Memory\n                </TableCell>\n                <TableCell className=\"py-2\">\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"bg-muted h-2 w-24 overflow-hidden rounded-full\">\n                      <div\n                        className=\"h-full rounded-full bg-amber-500\"\n                        style={{ width: \"67%\" }}\n                      />\n                    </div>\n                    <span className=\"text-muted-foreground text-sm\">\n                      10.7 / 16 GB\n                    </span>\n                  </div>\n                </TableCell>\n              </TableRow>\n              <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n                <TableCell className=\"bg-muted/50 py-2 text-sm font-medium\">\n                  Uptime\n                </TableCell>\n                <TableCell className=\"py-2 text-sm\">\n                  47 days, 12 hours\n                </TableCell>\n              </TableRow>\n              <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n                <TableCell className=\"bg-muted/50 py-2 text-sm font-medium\">\n                  OS\n                </TableCell>\n                <TableCell className=\"py-2 text-sm\">\n                  Amazon Linux 2023\n                </TableCell>\n              </TableRow>\n              <TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n                <TableCell className=\"bg-muted/50 py-2 text-sm font-medium\">\n                  Tags\n                </TableCell>\n                <TableCell className=\"py-2\">\n                  <div className=\"flex flex-wrap gap-1.5\">\n                    <Badge variant=\"secondary\" size=\"sm\">\n                      production\n                    </Badge>\n                    <Badge variant=\"secondary\" size=\"sm\">\n                      api\n                    </Badge>\n                    <Badge variant=\"secondary\" size=\"sm\">\n                      critical\n                    </Badge>\n                  </div>\n                </TableCell>\n              </TableRow>\n            </TableBody>\n          </Table>\n        </FramePanel>\n      </Frame>\n    </div>\n  )\n}","target":"components/examples/c-table-17.tsx"}],"meta":{"order":17,"gridSize":1,"label":"Server Config"}}