{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-13",
  "type": "registry:component",
  "title": "Table 13",
  "description": "Table 13. A structured layout used to display data in rows and columns, enabling easy comparison, sorting, and organization of information.",
  "dependencies": [],
  "registryDependencies": [
    "badge",
    "checkbox",
    "table"
  ],
  "files": [
    {
      "path": "components/watermelon/table-13.tsx",
      "type": "registry:component",
      "content": "import { useId } from 'react';\n\nimport { Checkbox } from '@/components/base-ui/checkbox';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableFooter,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/base-ui/table';\nimport { cn } from '@/lib/utils';\nimport { Badge } from '@/components/base-ui/badge';\n\nconst accounts = [\n  {\n    id: '1',\n    name: 'Aarav Sharma',\n    email: 'aarav@fintech.com',\n    location: 'Delhi, India',\n    status: 'Active',\n    balance: '₹1,20,000',\n  },\n  {\n    id: '2',\n    name: 'Priya Verma',\n    email: 'priya@fintech.com',\n    location: 'Bangalore, India',\n    status: 'Active',\n    balance: '₹8,500',\n  },\n  {\n    id: '3',\n    name: 'Rohan Gupta',\n    email: 'rohan@fintech.com',\n    location: 'Singapore',\n    status: 'Inactive',\n    balance: '₹0',\n  },\n  {\n    id: '4',\n    name: 'Sneha Kapoor',\n    email: 'sneha@fintech.com',\n    location: 'Mumbai, India',\n    status: 'Active',\n    balance: '₹52,300',\n  },\n  {\n    id: '5',\n    name: 'Kunal Mehta',\n    email: 'kunal@fintech.com',\n    location: 'Dubai, UAE',\n    status: 'Overdue',\n    balance: '-₹12,000',\n  },\n];\n\nconst Table13 = () => {\n  const id = useId();\n\n  const getStatusClass = (status: string) => {\n    switch (status) {\n      case 'Active':\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 'Inactive':\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 'Overdue':\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\n  return (\n    <div className=\"w-full\">\n      <div className=\"overflow-hidden rounded-xl border\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"bg-muted/50 shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,1),inset_0px_-1px_4px_0px_rgba(0,0,0,0.05)] dark:shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,0.1),inset_0px_-1px_2px_0px_rgba(0,0,0,0.02)]\">\n              <TableHead>\n                <Checkbox id={id} aria-label=\"select-all\" />\n              </TableHead>\n              <TableHead>User</TableHead>\n              <TableHead>Location</TableHead>\n              <TableHead>Status</TableHead>\n              <TableHead className=\"text-right\">Balance</TableHead>\n            </TableRow>\n          </TableHeader>\n\n          <TableBody>\n            {accounts.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={`user-checkbox-${item.id}`}\n                  />\n                </TableCell>\n\n                <TableCell>\n                  <div className=\"flex flex-col\">\n                    <span className=\"font-medium\">{item.name}</span>\n                    <span className=\"text-muted-foreground text-xs\">\n                      {item.email}\n                    </span>\n                  </div>\n                </TableCell>\n\n                <TableCell>{item.location}</TableCell>\n\n                <TableCell>\n                  <Badge\n                    variant=\"outline\"\n                    className={cn(\n                      getStatusClass(item.status),\n                      'rounded-full shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,1),inset_0px_-1px_2px_0px_rgba(0,0,0,0.05)] dark:shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,0.25),inset_0px_-1px_2px_0px_rgba(0,0,0,0.7)]',\n                    )}\n                  >\n                    {item.status}\n                  </Badge>\n                </TableCell>\n\n                <TableCell className=\"text-right font-medium\">\n                  {item.balance}\n                </TableCell>\n              </TableRow>\n            ))}\n          </TableBody>\n\n          <TableFooter>\n            <TableRow className=\"bg-muted/50 shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,1),inset_0px_-1px_4px_0px_rgba(0,0,0,0.05)] dark:shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,0.1),inset_0px_-1px_2px_0px_rgba(0,0,0,0.02)]\">\n              <TableCell colSpan={4}>Total Balance</TableCell>\n              <TableCell className=\"text-right font-semibold\">\n                ₹1,68,800\n              </TableCell>\n            </TableRow>\n          </TableFooter>\n        </Table>\n      </div>\n\n      <p className=\"text-muted-foreground mt-4 text-center text-sm\">\n        Accounts table with selection\n      </p>\n    </div>\n  );\n};\n\nexport default Table13;\n\n//  className={cn(\n//                   getStatusClass(project.status),\n//                   'rounded-sm shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,1),inset_0px_-1px_2px_0px_rgba(0,0,0,0.05)] dark:shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,0.25),inset_0px_-1px_2px_0px_rgba(0,0,0,0.7)]',\n//                 )}\n"
    }
  ]
}