{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "card-table-example",
  "title": "Card Table",
  "description": "card-table-example",
  "dependencies": [
    "@heroicons/react"
  ],
  "registryDependencies": [
    "https://intentui.com/r/card",
    "https://intentui.com/r/menu",
    "https://intentui.com/r/pagination",
    "https://intentui.com/r/table"
  ],
  "files": [
    {
      "path": "src/components/examples/surfaces/card/card-table-example.tsx",
      "content": "'use client'\n\nimport { EllipsisVerticalIcon } from '@heroicons/react/16/solid'\nimport { EyeIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card'\nimport { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from '@/components/ui/menu'\nimport {\n  Pagination,\n  PaginationFirst,\n  PaginationGap,\n  PaginationItem,\n  PaginationLabel,\n  PaginationLast,\n  PaginationList,\n  PaginationNext,\n  PaginationPrevious,\n  PaginationSection,\n} from '@/components/ui/pagination'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\n\nexport default function CardTableDemo() {\n  return (\n    <Card className=\"[--card-spacing:var(--gutter)]\">\n      <CardHeader>\n        <CardTitle>Users</CardTitle>\n        <CardDescription>Manage users, groups, and roles.</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <Table\n          bleed\n          className=\"[--gutter:var(--card-spacing)] sm:[--gutter:var(--card-spacing)]\"\n          aria-label=\"Users\"\n        >\n          <TableHeader>\n            <TableColumn className=\"w-0\">#</TableColumn>\n            <TableColumn isRowHeader>Name</TableColumn>\n            <TableColumn>Gender</TableColumn>\n            <TableColumn>Age</TableColumn>\n            <TableColumn>Occupation</TableColumn>\n            <TableColumn />\n          </TableHeader>\n          <TableBody items={users}>\n            {(item) => (\n              <TableRow id={item.id}>\n                <TableCell>{item.id}</TableCell>\n                <TableCell>{item.name}</TableCell>\n                <TableCell>{item.gender}</TableCell>\n                <TableCell>{item.age}</TableCell>\n                <TableCell>{item.occupation}</TableCell>\n                <TableCell className=\"text-end last:pr-2.5\">\n                  <Menu>\n                    <MenuTrigger>\n                      <EllipsisVerticalIcon />\n                    </MenuTrigger>\n                    <MenuContent placement=\"left top\">\n                      <MenuItem>\n                        <EyeIcon /> View\n                      </MenuItem>\n                      <MenuItem>\n                        <PencilSquareIcon /> Edit\n                      </MenuItem>\n                      <MenuSeparator />\n                      <MenuItem intent=\"danger\">\n                        <TrashIcon /> Delete\n                      </MenuItem>\n                    </MenuContent>\n                  </Menu>\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </CardContent>\n      <CardFooter className=\"-mt-[calc(var(--card-spacing)+1px)]\">\n        <Pagination>\n          <PaginationList className=\"hidden md:flex\">\n            <PaginationFirst href=\"#\" />\n            <PaginationPrevious href=\"#\" />\n            <PaginationSection>\n              <PaginationItem href=\"#\">1</PaginationItem>\n              <PaginationItem href=\"#\">2</PaginationItem>\n              <PaginationItem href=\"#\">3</PaginationItem>\n              <PaginationGap />\n              <PaginationItem href=\"#\">23</PaginationItem>\n              <PaginationItem href=\"#\" isCurrent>\n                24\n              </PaginationItem>\n              <PaginationItem href=\"#\">25</PaginationItem>\n            </PaginationSection>\n\n            <PaginationNext href=\"#\" />\n            <PaginationLast href=\"#\" />\n          </PaginationList>\n\n          <PaginationList className=\"md:hidden\">\n            <PaginationFirst href=\"#\" />\n            <PaginationPrevious href=\"#\" />\n            <PaginationSection className=\"rounded-(--section-radius) border px-3 *:min-w-4\">\n              <PaginationLabel>3</PaginationLabel>\n              <PaginationLabel className=\"text-muted-fg\">/</PaginationLabel>\n              <PaginationLabel>10</PaginationLabel>\n            </PaginationSection>\n            <PaginationNext href=\"#\" />\n            <PaginationLast href=\"#\" />\n          </PaginationList>\n        </Pagination>\n      </CardFooter>\n    </Card>\n  )\n}\n\nconst users = [\n  {\n    id: 1,\n    name: 'John Doe',\n    gender: 'Male',\n    age: 30,\n    occupation: 'Software Engineer',\n  },\n  {\n    id: 2,\n    name: 'Jane Smith',\n    gender: 'Female',\n    age: 25,\n    occupation: 'Marketing Manager',\n  },\n  {\n    id: 3,\n    name: 'Bob Johnson',\n    gender: 'Male',\n    age: 40,\n    occupation: 'Doctor',\n  },\n  {\n    id: 4,\n    name: 'Emily Chen',\n    gender: 'Female',\n    age: 28,\n    occupation: 'Teacher',\n  },\n  {\n    id: 5,\n    name: 'Michael Brown',\n    gender: 'Male',\n    age: 35,\n    occupation: 'Lawyer',\n  },\n  {\n    id: 6,\n    name: 'Sarah Lee',\n    gender: 'Female',\n    age: 32,\n    occupation: 'Designer',\n  },\n  {\n    id: 7,\n    name: 'Kevin White',\n    gender: 'Male',\n    age: 45,\n    occupation: 'CEO',\n  },\n  {\n    id: 8,\n    name: 'Lisa Nguyen',\n    gender: 'Female',\n    age: 29,\n    occupation: 'Engineer',\n  },\n  {\n    id: 9,\n    name: 'David Kim',\n    gender: 'Male',\n    age: 38,\n    occupation: 'Consultant',\n  },\n  {\n    id: 10,\n    name: 'Hannah Patel',\n    gender: 'Female',\n    age: 26,\n    occupation: 'Writer',\n  },\n]\n",
      "type": "registry:page",
      "target": "app/card-table-example/page.tsx"
    }
  ],
  "type": "registry:page"
}