{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-15",
  "type": "registry:component",
  "title": "Table 15",
  "description": "Table 15. A structured layout used to display data in rows and columns, enabling easy comparison, sorting, and organization of information.",
  "dependencies": [],
  "registryDependencies": [
    "avatar",
    "table"
  ],
  "files": [
    {
      "path": "components/watermelon/table-15.tsx",
      "type": "registry:component",
      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/base-ui/avatar';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/base-ui/table';\n\nconst developers = [\n  {\n    id: '1',\n    name: 'Guillermo Rauch',\n    username: '@rauchg',\n    src: 'https://github.com/rauchg.png',\n    fallback: 'GR',\n    country: 'USA',\n    contributions: 1240,\n    status: 'online',\n  },\n  {\n    id: '2',\n    name: 'Evan You',\n    username: '@yyx990803',\n    src: 'https://github.com/yyx990803.png',\n    fallback: 'EY',\n    country: 'Singapore',\n    contributions: 980,\n    status: 'online',\n  },\n  {\n    id: '3',\n    name: 'Dan Abramov',\n    username: '@gaearon',\n    src: 'https://github.com/gaearon.png',\n    fallback: 'DA',\n    country: 'UK',\n    contributions: 870,\n    status: 'away',\n  },\n  {\n    id: '4',\n    name: 'Addy Osmani',\n    username: '@addyosmani',\n    src: 'https://github.com/addyosmani.png',\n    fallback: 'AO',\n    country: 'USA',\n    contributions: 650,\n    status: 'offline',\n  },\n];\n\nconst getStatusDot = (status: string) => {\n  switch (status) {\n    case 'online':\n      return 'bg-green-500';\n    case 'away':\n      return 'bg-yellow-500';\n    case 'offline':\n      return 'bg-muted-foreground';\n    default:\n      return '';\n  }\n};\n\nconst Table15 = () => {\n  return (\n    <div className=\"w-full\">\n      <div className=\"[&>div]:rounded-sm [&>div]:border\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"hover:bg-muted/50 bg-muted/50\">\n              <TableHead>#</TableHead>\n              <TableHead>Developer</TableHead>\n              <TableHead>Country</TableHead>\n              <TableHead className=\"text-right\">Commits</TableHead>\n            </TableRow>\n          </TableHeader>\n\n          <TableBody>\n            {developers.map((dev, i) => (\n              <TableRow key={dev.id} className=\"hover:bg-muted/50\">\n                <TableCell className=\"text-muted-foreground font-medium\">\n                  {i + 1}\n                </TableCell>\n\n                <TableCell>\n                  <div className=\"flex items-center gap-3\">\n                    <div className=\"relative\">\n                      <Avatar className=\"h-8 w-8\">\n                        <AvatarImage src={dev.src} alt={dev.name} />\n                        <AvatarFallback className=\"text-xs\">\n                          {dev.fallback}\n                        </AvatarFallback>\n                      </Avatar>\n\n                      <span\n                        className={`border-background absolute right-0 bottom-0 h-2.5 w-2.5 rounded-full border ${getStatusDot(\n                          dev.status,\n                        )}`}\n                      />\n                    </div>\n\n                    <div>\n                      <div className=\"leading-none font-medium\">{dev.name}</div>\n                      <div className=\"text-muted-foreground text-xs\">\n                        {dev.username}\n                      </div>\n                    </div>\n                  </div>\n                </TableCell>\n\n                <TableCell className=\"text-muted-foreground\">\n                  {dev.country}\n                </TableCell>\n\n                <TableCell className=\"text-right\">\n                  <div className=\"font-semibold\">\n                    {dev.contributions.toLocaleString()}\n                  </div>\n                  <div className=\"text-muted-foreground text-xs\">\n                    contributions\n                  </div>\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        Developer leaderboard\n      </p>\n    </div>\n  );\n};\n\nexport default Table15;\n"
    }
  ]
}