{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-table-16","type":"registry:block","title":"Vertical table with employee profile details","description":"Vertical table with employee profile details","dependencies":[],"registryDependencies":["avatar","@reui/badge","table"],"files":[{"path":"c-table-16.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  TableRow,\n} from \"@/components/ui/table\"\n\nexport function Pattern() {\n  return (\n    <div className=\"mx-auto flex w-full max-w-lg flex-col\">\n      <div className=\"bg-background overflow-hidden rounded-lg border\">\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                Employee\n              </TableCell>\n              <TableCell className=\"py-2\">\n                <div className=\"flex items-center gap-2\">\n                  <Avatar size=\"sm\">\n                    <AvatarImage\n                      src=\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=96&h=96&dpr=2&q=80\"\n                      alt=\"Sarah Chen\"\n                    />\n                    <AvatarFallback>SC</AvatarFallback>\n                  </Avatar>\n                  <div className=\"flex flex-col leading-none\">\n                    <span className=\"text-sm font-medium\">Sarah Chen</span>\n                    <span className=\"text-muted-foreground text-xs\">\n                      Lead Product Designer\n                    </span>\n                  </div>\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                Department\n              </TableCell>\n              <TableCell className=\"py-2 text-sm\">\n                Design & User Experience\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                Email\n              </TableCell>\n              <TableCell className=\"text-primary py-2 text-sm\">\n                sarah.chen@acmecorp.com\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                Location\n              </TableCell>\n              <TableCell className=\"py-2 text-sm\">San Francisco, CA</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                Status\n              </TableCell>\n              <TableCell className=\"py-2\">\n                <Badge variant=\"success-light\" size=\"sm\">\n                  Active\n                </Badge>\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                Start Date\n              </TableCell>\n              <TableCell className=\"py-2 text-sm\">March 15, 2022</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                Reports To\n              </TableCell>\n              <TableCell className=\"py-2 text-sm\">\n                James Rodriguez, VP of Design\n              </TableCell>\n            </TableRow>\n          </TableBody>\n        </Table>\n      </div>\n    </div>\n  )\n}","target":"components/examples/c-table-16.tsx"}],"meta":{"order":16,"gridSize":1,"label":"Employee Profile"}}