{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-11",
  "title": "Availability matrix",
  "description": "Grouped platform columns with a mark and a version for each feature.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/icons.json",
    "https://ui.ndekocode.dev/r/table.json",
    "https://ui.ndekocode.dev/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/table/table-11.tsx",
      "content": "import {\n  CheckIcon,\n  MonitorIcon,\n  SmartphoneIcon,\n  XIcon,\n} from '@/registry/ndeko/lib/icons';\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/ndeko/ui/table';\n\ntype Availability = {\n  platform: string;\n  since: string | null;\n};\n\ntype Feature = {\n  name: string;\n  desktop: Availability[];\n  mobile: Availability[];\n};\n\nconst FEATURES: Feature[] = [\n  {\n    name: 'Offline mode',\n    desktop: [\n      { platform: 'macOS', since: '2.1' },\n      { platform: 'Windows', since: '2.1' },\n      { platform: 'Linux', since: '2.3' },\n      { platform: 'Web', since: null },\n    ],\n    mobile: [\n      { platform: 'iOS', since: '3.0' },\n      { platform: 'iPadOS', since: '3.0' },\n      { platform: 'Android', since: '3.2' },\n    ],\n  },\n  {\n    name: 'Screen recording',\n    desktop: [\n      { platform: 'macOS', since: '1.8' },\n      { platform: 'Windows', since: '1.8' },\n      { platform: 'Linux', since: null },\n      { platform: 'Web', since: '2.4' },\n    ],\n    mobile: [\n      { platform: 'iOS', since: null },\n      { platform: 'iPadOS', since: null },\n      { platform: 'Android', since: '3.4' },\n    ],\n  },\n  {\n    name: 'Global shortcuts',\n    desktop: [\n      { platform: 'macOS', since: '1.2' },\n      { platform: 'Windows', since: '1.2' },\n      { platform: 'Linux', since: '1.5' },\n      { platform: 'Web', since: null },\n    ],\n    mobile: [\n      { platform: 'iOS', since: null },\n      { platform: 'iPadOS', since: '3.1' },\n      { platform: 'Android', since: null },\n    ],\n  },\n  {\n    name: 'Live cursors',\n    desktop: [\n      { platform: 'macOS', since: '2.6' },\n      { platform: 'Windows', since: '2.6' },\n      { platform: 'Linux', since: '2.6' },\n      { platform: 'Web', since: '2.6' },\n    ],\n    mobile: [\n      { platform: 'iOS', since: '3.3' },\n      { platform: 'iPadOS', since: '3.3' },\n      { platform: 'Android', since: '3.3' },\n    ],\n  },\n];\n\nconst DESKTOP_PLATFORMS = FEATURES[0].desktop.map((entry) => entry.platform);\nconst MOBILE_PLATFORMS = FEATURES[0].mobile.map((entry) => entry.platform);\nconst ALL_PLATFORMS = [...DESKTOP_PLATFORMS, ...MOBILE_PLATFORMS];\n\nconst GRID_ROW = '*:border-border [&>:not(:last-child)]:hairline-r';\n\nconst VERTICAL_LABEL =\n  'relative left-[calc(50%-0.5rem)] block rotate-180 leading-4 whitespace-nowrap [text-orientation:sideways] [writing-mode:vertical-rl]';\n\nfunction AvailabilityMark({ since }: { since: string | null }) {\n  if (since === null) {\n    return (\n      <>\n        <XIcon\n          aria-hidden='true'\n          className='text-muted-foreground/60 inline-flex size-4'\n        />\n        <span className='sr-only'>Not available</span>\n        <div className='text-muted-foreground text-xs font-medium'>No</div>\n      </>\n    );\n  }\n  return (\n    <>\n      <CheckIcon\n        aria-hidden='true'\n        className='text-success-foreground inline-flex size-4'\n      />\n      <span className='sr-only'>Available since version</span>\n      <div className='text-muted-foreground text-xs font-medium tabular-nums'>\n        {since}\n      </div>\n    </>\n  );\n}\n\nexport default function Table11() {\n  return (\n    <div className='w-full'>\n      <Table>\n        <TableHeader className='[&_tr:first-child]:border-b-0'>\n          <TableRow className={`${GRID_ROW} hover:bg-transparent`}>\n            <TableCell />\n            <TableHead\n              colSpan={DESKTOP_PLATFORMS.length}\n              className='hairline-b border-border text-center'\n            >\n              <span className='inline-flex items-center gap-1.5'>\n                <MonitorIcon aria-hidden='true' className='size-4' />\n                Desktop\n              </span>\n            </TableHead>\n            <TableHead\n              colSpan={MOBILE_PLATFORMS.length}\n              className='hairline-b border-border text-center'\n            >\n              <span className='inline-flex items-center gap-1.5'>\n                <SmartphoneIcon aria-hidden='true' className='size-4' />\n                Mobile\n              </span>\n            </TableHead>\n          </TableRow>\n          <TableRow className={`${GRID_ROW} hover:bg-transparent`}>\n            <TableCell />\n            {ALL_PLATFORMS.map((platform) => (\n              <TableHead\n                key={platform}\n                className='text-foreground h-auto py-3 align-bottom'\n              >\n                <span className={VERTICAL_LABEL}>{platform}</span>\n              </TableHead>\n            ))}\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {FEATURES.map((feature) => {\n            const availabilities = [...feature.desktop, ...feature.mobile];\n            return (\n              <TableRow key={feature.name} className={GRID_ROW}>\n                <TableHead\n                  scope='row'\n                  className='text-foreground text-[13px] font-medium'\n                >\n                  {feature.name}\n                </TableHead>\n                {availabilities.map((availability) => (\n                  <TableCell\n                    key={availability.platform}\n                    className='space-y-1 text-center'\n                  >\n                    <AvailabilityMark since={availability.since} />\n                  </TableCell>\n                ))}\n              </TableRow>\n            );\n          })}\n        </TableBody>\n      </Table>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "table"
  ],
  "type": "registry:component"
}