{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-16",
  "type": "registry:component",
  "title": "Table 16",
  "description": "Table 16. A structured layout used to display data in rows and columns, enabling easy comparison, sorting, and organization of information.",
  "dependencies": [],
  "registryDependencies": [
    "badge",
    "pagination",
    "table"
  ],
  "files": [
    {
      "path": "components/watermelon/table-16.tsx",
      "type": "registry:component",
      "content": "import { Badge } from '@/components/base-ui/badge';\nimport {\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPrevious,\n} from '@/components/base-ui/pagination';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/base-ui/table';\n\nconst candidates = [\n  {\n    id: '1',\n    name: 'Aarav Sharma',\n    role: 'Frontend Developer',\n    stage: 'Interview',\n    applied: '12 Apr 2026',\n    rating: '4.5',\n  },\n  {\n    id: '2',\n    name: 'Priya Verma',\n    role: 'Product Designer',\n    stage: 'Screening',\n    applied: '10 Apr 2026',\n    rating: '4.2',\n  },\n  {\n    id: '3',\n    name: 'Rohan Gupta',\n    role: 'Backend Engineer',\n    stage: 'Rejected',\n    applied: '8 Apr 2026',\n    rating: '3.8',\n  },\n  {\n    id: '4',\n    name: 'Sneha Kapoor',\n    role: 'UI Designer',\n    stage: 'Offer',\n    applied: '5 Apr 2026',\n    rating: '4.9',\n  },\n  {\n    id: '5',\n    name: 'Kunal Mehta',\n    role: 'DevOps Engineer',\n    stage: 'Interview',\n    applied: '3 Apr 2026',\n    rating: '4.3',\n  },\n  {\n    id: '6',\n    name: 'Anjali Singh',\n    role: 'Data Analyst',\n    stage: 'Screening',\n    applied: '1 Apr 2026',\n    rating: '4.1',\n  },\n  {\n    id: '7',\n    name: 'Vikas Patel',\n    role: 'QA Engineer',\n    stage: 'Rejected',\n    applied: '28 Mar 2026',\n    rating: '3.5',\n  },\n];\n\nconst getStageClass = (stage: string) => {\n  switch (stage) {\n    case 'Interview':\n      return 'bg-blue-600/10 text-blue-600 border-blue-600/20 dark:bg-blue-400/10 dark:text-blue-400 dark:border-blue-400/20';\n    case 'Screening':\n      return 'bg-yellow-600/10 text-yellow-600 border-yellow-600/20 dark:bg-yellow-400/10 dark:text-yellow-400 dark:border-yellow-400/20';\n    case 'Offer':\n      return 'bg-green-600/10 text-green-600 border-green-600/20 dark:bg-green-400/10 dark:text-green-400 dark:border-green-400/20';\n    case 'Rejected':\n      return 'bg-red-600/10 text-red-600 border-red-600/20 dark:bg-red-400/10 dark:text-red-400 dark:border-red-400/20';\n    default:\n      return '';\n  }\n};\n\nconst Table16 = () => {\n  return (\n    <div className=\"w-full\">\n      <div className=\"overflow-hidden rounded-md border\">\n        <Table>\n          <TableHeader className=\"bg-muted/50\">\n            <TableRow>\n              <TableHead>Candidate</TableHead>\n              <TableHead>Role</TableHead>\n              <TableHead>Stage</TableHead>\n              <TableHead>Applied</TableHead>\n              <TableHead className=\"text-right\">Rating</TableHead>\n            </TableRow>\n          </TableHeader>\n\n          <TableBody>\n            {candidates.map((c) => (\n              <TableRow key={c.id} className=\"hover:bg-muted/50\">\n                <TableCell className=\"font-medium\">{c.name}</TableCell>\n\n                <TableCell className=\"text-muted-foreground\">\n                  {c.role}\n                </TableCell>\n\n                <TableCell>\n                  <Badge\n                    className={`inline-flex items-center rounded-sm border px-2 py-0.5 text-xs font-medium ${getStageClass(\n                      c.stage,\n                    )}`}\n                  >\n                    {c.stage}\n                  </Badge>\n                </TableCell>\n\n                <TableCell>{c.applied}</TableCell>\n\n                <TableCell className=\"text-right font-semibold\">\n                  ⭐ {c.rating}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n\n          <TableFooter>\n            <TableRow>\n              <TableCell colSpan={4}>Total Candidates</TableCell>\n              <TableCell className=\"text-right\">7</TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </div>\n\n      <Pagination className=\"mt-4\">\n        <PaginationContent className=\"[&_[data-active=true]]:bg-primary/90 [&_[data-active=true]]:text-primary-foreground [&_[data-active=true]]:bg-primary/90 dark:hover:[&_[data-active=true]]:bg-primary/90\">\n          <PaginationItem>\n            <PaginationPrevious href=\"#\" />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">1</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\" isActive>\n              2\n            </PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationLink href=\"#\">3</PaginationLink>\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationEllipsis />\n          </PaginationItem>\n          <PaginationItem>\n            <PaginationNext href=\"#\" />\n          </PaginationItem>\n        </PaginationContent>\n      </Pagination>\n\n      <p className=\"text-muted-foreground mt-4 text-center text-sm\">\n        Candidate pipeline table\n      </p>\n    </div>\n  );\n};\n\nexport default Table16;\n"
    }
  ]
}