{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comp-476",
  "type": "registry:component",
  "title": "Comp 476",
  "description": "Comp 476",
  "files": [
    {
      "path": "registry/ui-basic/comp-476.tsx",
      "content": "import {\n\tTable,\n\tTableBody,\n\tTableCell,\n\tTableHead,\n\tTableHeader,\n\tTableRow,\n} from \"@/components/ui/table\";\nimport { CheckIcon, MonitorIcon, SmartphoneIcon, XIcon } from \"lucide-react\";\n\nconst items = [\n\t{\n\t\tfeature: \"scroll-timeline\",\n\t\tdesktop: [\n\t\t\t{ name: \"Chrome\", supported: true, version: \"115\" },\n\t\t\t{ name: \"Edge\", supported: true, version: \"115\" },\n\t\t\t{ name: \"Firefox\", supported: false, version: \"111\" },\n\t\t\t{ name: \"Opera\", supported: true, version: \"101\" },\n\t\t\t{ name: \"Safari\", supported: false, version: \"No\" },\n\t\t],\n\t\tmobile: [\n\t\t\t{ name: \"Chrome Android\", supported: true, version: \"115\" },\n\t\t\t{ name: \"Firefox Android\", supported: false, version: \"No\" },\n\t\t\t{ name: \"Opera Android\", supported: true, version: \"77\" },\n\t\t\t{ name: \"Safari iOS\", supported: false, version: \"No\" },\n\t\t\t{ name: \"Samsung Internet\", supported: true, version: \"23\" },\n\t\t],\n\t},\n\t{\n\t\tfeature: \"view-timeline\",\n\t\tdesktop: [\n\t\t\t{ name: \"Chrome\", supported: true, version: \"115\" },\n\t\t\t{ name: \"Edge\", supported: true, version: \"115\" },\n\t\t\t{ name: \"Firefox\", supported: false, version: \"114\" },\n\t\t\t{ name: \"Opera\", supported: true, version: \"101\" },\n\t\t\t{ name: \"Safari\", supported: false, version: \"No\" },\n\t\t],\n\t\tmobile: [\n\t\t\t{ name: \"Chrome Android\", supported: true, version: \"115\" },\n\t\t\t{ name: \"Firefox Android\", supported: false, version: \"No\" },\n\t\t\t{ name: \"Opera Android\", supported: true, version: \"77\" },\n\t\t\t{ name: \"Safari iOS\", supported: false, version: \"No\" },\n\t\t\t{ name: \"Samsung Internet\", supported: true, version: \"23\" },\n\t\t],\n\t},\n\t{\n\t\tfeature: \"font-size-adjust\",\n\t\tdesktop: [\n\t\t\t{ name: \"Chrome\", supported: true, version: \"127\" },\n\t\t\t{ name: \"Edge\", supported: true, version: \"127\" },\n\t\t\t{ name: \"Firefox\", supported: false, version: \"3\" },\n\t\t\t{ name: \"Opera\", supported: true, version: \"113\" },\n\t\t\t{ name: \"Safari\", supported: true, version: \"16.4\" },\n\t\t],\n\t\tmobile: [\n\t\t\t{ name: \"Chrome Android\", supported: true, version: \"127\" },\n\t\t\t{ name: \"Firefox Android\", supported: true, version: \"4\" },\n\t\t\t{ name: \"Opera Android\", supported: true, version: \"84\" },\n\t\t\t{ name: \"Safari iOS\", supported: true, version: \"16.4\" },\n\t\t\t{ name: \"Samsung Internet\", supported: false, version: \"No\" },\n\t\t],\n\t},\n];\n\nexport default function Component() {\n\treturn (\n\t\t<Table>\n\t\t\t<TableHeader>\n\t\t\t\t<TableRow className=\"*:border-border border-y-0 hover:bg-transparent [&>:not(:last-child)]:border-r\">\n\t\t\t\t\t<TableCell></TableCell>\n\t\t\t\t\t<TableHead className=\"border-b text-center\" colSpan={5}>\n\t\t\t\t\t\t<MonitorIcon\n\t\t\t\t\t\t\tclassName=\"inline-flex\"\n\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span className=\"sr-only\">Desktop browsers</span>\n\t\t\t\t\t</TableHead>\n\t\t\t\t\t<TableHead className=\"border-b text-center\" colSpan={5}>\n\t\t\t\t\t\t<SmartphoneIcon\n\t\t\t\t\t\t\tclassName=\"inline-flex\"\n\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span className=\"sr-only\">Mobile browsers</span>\n\t\t\t\t\t</TableHead>\n\t\t\t\t</TableRow>\n\t\t\t</TableHeader>\n\t\t\t<TableHeader>\n\t\t\t\t<TableRow className=\"*:border-border hover:bg-transparent [&>:not(:last-child)]:border-r\">\n\t\t\t\t\t<TableCell></TableCell>\n\t\t\t\t\t{items[0].desktop.map((browser) => (\n\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\tkey={browser.name}\n\t\t\t\t\t\t\tclassName=\"text-foreground h-auto py-3 align-bottom\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"relative left-[calc(50%-.5rem)] block rotate-180 leading-4 whitespace-nowrap [text-orientation:sideways] [writing-mode:vertical-rl]\">\n\t\t\t\t\t\t\t\t{browser.name}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t))}\n\t\t\t\t\t{items[0].mobile.map((browser) => (\n\t\t\t\t\t\t<TableHead\n\t\t\t\t\t\t\tkey={browser.name}\n\t\t\t\t\t\t\tclassName=\"text-foreground h-auto py-3 align-bottom\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span className=\"relative left-[calc(50%-.5rem)] block rotate-180 leading-4 whitespace-nowrap [text-orientation:sideways] [writing-mode:vertical-rl]\">\n\t\t\t\t\t\t\t\t{browser.name}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t))}\n\t\t\t\t</TableRow>\n\t\t\t</TableHeader>\n\t\t\t<TableBody>\n\t\t\t\t{items.map((item) => (\n\t\t\t\t\t<TableRow\n\t\t\t\t\t\tkey={item.feature}\n\t\t\t\t\t\tclassName=\"*:border-border [&>:not(:last-child)]:border-r\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<TableHead className=\"text-foreground font-medium\">\n\t\t\t\t\t\t\t{item.feature}\n\t\t\t\t\t\t</TableHead>\n\t\t\t\t\t\t{[...item.desktop, ...item.mobile].map((browser, index) => (\n\t\t\t\t\t\t\t<TableCell\n\t\t\t\t\t\t\t\tkey={`${browser.name}-${index}`}\n\t\t\t\t\t\t\t\tclassName=\"space-y-1 text-center\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{browser.supported ? (\n\t\t\t\t\t\t\t\t\t<CheckIcon\n\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex stroke-emerald-600\"\n\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<XIcon\n\t\t\t\t\t\t\t\t\t\tclassName=\"inline-flex stroke-red-600\"\n\t\t\t\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\t\t\t\t\t{browser.supported ? \"Supported\" : \"Not supported\"}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<div className=\"text-muted-foreground text-xs font-medium\">\n\t\t\t\t\t\t\t\t\t{browser.version}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</TableCell>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</TableRow>\n\t\t\t\t))}\n\t\t\t</TableBody>\n\t\t</Table>\n\t);\n}\n",
      "type": "registry:ui"
    }
  ]
}