{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "grid-list-section-example",
  "title": "Grid List Section",
  "description": "grid-list-section-example",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/grid-list"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/grid-list/grid-list-section-example.tsx",
      "content": "'use client'\n\nimport { Collection } from 'react-aria-components/Collection'\nimport {\n  GridList,\n  GridListDescription,\n  GridListHeader,\n  GridListItem,\n  GridListLabel,\n  GridListSection,\n  GridListSpacer,\n  GridListStart,\n} from '@/components/ui/grid-list'\n\nexport default function GridListSectionDemo() {\n  return (\n    <GridList className=\"sm:min-w-96\" items={servers} aria-label=\"Servers\" selectionMode=\"single\">\n      {(server) => (\n        <GridListSection id={server.id}>\n          <GridListHeader>\n            <div>\n              <div>{server.name}</div>\n              <span className=\"font-normal text-muted-fg\">{server.ipaddress}</span>\n            </div>\n          </GridListHeader>\n\n          <Collection items={server.sites}>\n            {(item) => (\n              <GridListItem className=\"sm:items-center\" textValue={item.name}>\n                <GridListStart className=\"sm:items-center\">\n                  <div className=\"flex flex-col gap-x-2 sm:flex-row sm:items-center\">\n                    <GridListLabel>{item.name}</GridListLabel>\n                    <span className=\"hidden text-muted-fg sm:inline\">/</span>\n                    <GridListDescription>{item.domain}</GridListDescription>\n                  </div>\n                </GridListStart>\n                <GridListSpacer />\n                <span className=\"flex items-center gap-x-2 *:block *:size-1.5 *:rounded-full\">\n                  {item.status === 'online' ? (\n                    <i className=\"bg-primary-subtle-fg\" />\n                  ) : item.status === 'deploying' ? (\n                    <i className=\"bg-info-subtle-fg\" />\n                  ) : item.status === 'maintenance' ? (\n                    <i className=\"bg-warning-subtle-fg\" />\n                  ) : item.status === 'error' ? (\n                    <i className=\"bg-danger-subtle-fg\" />\n                  ) : item.status === 'paused' ? (\n                    <i className=\"bg-secondary-fg\" />\n                  ) : item.status === 'degraded' ? (\n                    <i className=\"bg-warning-subtle-fg\" />\n                  ) : (\n                    <i className=\"bg-secondary-fg\" />\n                  )}\n                  {item.status}\n                </span>\n              </GridListItem>\n            )}\n          </Collection>\n        </GridListSection>\n      )}\n    </GridList>\n  )\n}\n\nconst servers = [\n  {\n    id: 'srv_nyc_1',\n    name: 'NYC-1',\n    avatar: 'https://avatar.vercel.sh/nyc.svg?text=NY',\n    ipaddress: '192.168.10.21',\n    status: 'online',\n    sites: [\n      {\n        id: 'site_001',\n        name: 'Atlas blog',\n        domain: 'atlasblog.com',\n        repo: 'github.com/atlas/blog',\n        avatar: 'https://avatar.vercel.sh/atlas.svg?text=AB',\n        status: 'online',\n      },\n      {\n        id: 'site_002',\n        name: 'Northwind shop',\n        domain: 'northwind.shop',\n        repo: 'github.com/northwind/shop',\n        avatar: 'https://avatar.vercel.sh/northwind.svg?text=NS',\n        status: 'deploying',\n      },\n      {\n        id: 'site_003',\n        name: 'Beacon docs',\n        domain: 'docs.beacon.io',\n        repo: 'github.com/beacon/docs',\n        avatar: 'https://avatar.vercel.sh/beacon.svg?text=BD',\n        status: 'maintenance',\n      },\n    ],\n  },\n  {\n    id: 'srv_lon_1',\n    name: 'LON-1',\n    avatar: 'https://avatar.vercel.sh/lon.svg?text=LO',\n    ipaddress: '10.0.3.44',\n    status: 'degraded',\n    sites: [\n      {\n        id: 'site_007',\n        name: 'Evergreen health',\n        domain: 'evergreen.health',\n        repo: 'github.com/evergreen/health',\n        avatar: 'https://avatar.vercel.sh/evergreen.svg?text=EH',\n        status: 'online',\n      },\n      {\n        id: 'site_008',\n        name: 'Glacier analytics',\n        domain: 'glacier.ai',\n        repo: 'github.com/glacier/analytics',\n        avatar: 'https://avatar.vercel.sh/glacier.svg?text=GA',\n        status: 'deploying',\n      },\n    ],\n  },\n]\n",
      "type": "registry:page",
      "target": "app/grid-list-section-example/page.tsx"
    }
  ],
  "type": "registry:page"
}