{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-14",
  "type": "registry:component",
  "title": "Table 14",
  "description": "Table 14. A structured layout used to display data in rows and columns, enabling easy comparison, sorting, and organization of information.",
  "dependencies": [
    "react-icons"
  ],
  "registryDependencies": [
    "button",
    "checkbox",
    "table"
  ],
  "files": [
    {
      "path": "components/watermelon/table-14.tsx",
      "type": "registry:component",
      "content": "import { useId } from 'react';\n\nimport { HiFolder, HiPencil, HiTrash } from 'react-icons/hi';\n\nimport { Checkbox } from '@/components/base-ui/checkbox';\nimport { Button } from '@/components/base-ui/button';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/base-ui/table';\n\nconst projects = [\n  {\n    id: '1',\n    name: 'Dashboard Redesign',\n    owner: 'Aarav Sharma',\n    status: 'Completed',\n    tasks: 24,\n    budget: '₹45,000',\n  },\n  {\n    id: '2',\n    name: 'Mobile App UI',\n    owner: 'Priya Verma',\n    status: 'In Progress',\n    tasks: 12,\n    budget: '₹28,000',\n  },\n  {\n    id: '3',\n    name: 'Landing Page Revamp',\n    owner: 'Rohan Gupta',\n    status: 'On Hold',\n    tasks: 8,\n    budget: '₹12,000',\n  },\n  {\n    id: '4',\n    name: 'Analytics Integration',\n    owner: 'Sneha Kapoor',\n    status: 'In Progress',\n    tasks: 16,\n    budget: '₹32,000',\n  },\n  {\n    id: '5',\n    name: 'API Optimization',\n    owner: 'Kunal Mehta',\n    status: 'Completed',\n    tasks: 20,\n    budget: '₹50,000',\n  },\n];\n\nconst getStatusClass = (status: string) => {\n  switch (status) {\n    case 'Completed':\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 'In Progress':\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 'On Hold':\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    default:\n      return '';\n  }\n};\n\nconst Table14 = () => {\n  const id = useId();\n\n  return (\n    <div className=\"w-full\">\n      <div className=\"[&>div]:rounded-sm [&>div]:border\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"hover:bg-transparent\">\n              <TableHead>\n                <Checkbox id={id} aria-label=\"select-all\" />\n              </TableHead>\n              <TableHead>Project</TableHead>\n              <TableHead>Owner</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead>Tasks</TableHead>\n              <TableHead>Budget</TableHead>\n              <TableHead className=\"w-0\">Actions</TableHead>\n            </TableRow>\n          </TableHeader>\n\n          <TableBody>\n            {projects.map((item) => (\n              <TableRow\n                key={item.id}\n                className=\"has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:hover:bg-primary/15\"\n              >\n                <TableCell>\n                  <Checkbox\n                    id={`table-checkbox-${item.id}`}\n                    aria-label={`project-checkbox-${item.id}`}\n                  />\n                </TableCell>\n\n                <TableCell>\n                  <div className=\"flex items-center gap-2\">\n                    <HiFolder className=\"text-muted-foreground h-4 w-4\" />\n                    <span className=\"font-medium\">{item.name}</span>\n                  </div>\n                </TableCell>\n\n                <TableCell>{item.owner}</TableCell>\n\n                <TableCell>\n                  <span\n                    className={`inline-flex items-center gap-1 rounded-sm border px-2 py-0.5 text-xs font-medium ${getStatusClass(\n                      item.status,\n                    )}`}\n                  >\n                    <span className=\"h-1.5 w-1.5 rounded-full bg-current\" />\n                    {item.status}\n                  </span>\n                </TableCell>\n\n                <TableCell>{item.tasks}</TableCell>\n\n                <TableCell className=\"font-medium\">{item.budget}</TableCell>\n\n                <TableCell className=\"flex items-center gap-1\">\n                  <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n                    <HiPencil className=\"h-4 w-4\" />\n                  </Button>\n\n                  <Button\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"hover:text-destructive rounded-full transition-colors duration-200\"\n                  >\n                    <HiTrash className=\"h-4 w-4\" />\n                  </Button>\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n        </Table>\n      </div>\n\n      <p className=\"text-muted-foreground mt-4 text-center text-sm\">\n        Project management table\n      </p>\n    </div>\n  );\n};\n\nexport default Table14;\n"
    }
  ]
}