{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-list-02",
  "type": "registry:block",
  "title": "Grid List with Links",
  "description": "A grid list with links block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "avatar",
    "card"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "content/components/grid-list/grid-list-02.tsx",
      "type": "registry:component",
      "target": "components/grid-list-02.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';\nimport { Card, CardContent } from '@/components/ui/card';\n\nconst people = [\n  {\n    name: 'Timur Ercan',\n    email: 'timur@documenso.com',\n    role: 'Co-Founder / CEO',\n    imageUrl: 'https://blocks.so/avatar-02.png',\n  },\n  {\n    name: 'Lucas Smith',\n    email: 'lucas@documenso.com',\n    role: 'Co-Founder / CTO',\n    imageUrl: 'https://blocks.so/avatar-03.png',\n  },\n  {\n    name: 'Ephraim Duncan',\n    email: 'ephraim@documenso.com',\n    role: 'Software Engineer',\n    imageUrl: 'https://blocks.so/avatar-01.png',\n  },\n  {\n    name: 'Catalin Pit',\n    email: 'catalin@documenso.com',\n    role: 'Software Engineer',\n    imageUrl: 'https://blocks.so/avatar-04.png',\n  },\n];\n\nexport default function GridList02() {\n  return (\n    <div className=\"flex items-center justify-center p-8\">\n      <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n        {people.map((person) => (\n          <Card\n            className=\"relative border py-0 shadow-2xs transition-[border-color,box-shadow] duration-100 ease-out focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 hover:border-muted-foreground hover:shadow-sm\"\n            key={person.email}\n          >\n            <CardContent className=\"flex items-center space-x-4 p-4\">\n              <Avatar className=\"h-10 w-10\">\n                <AvatarImage alt={person.name} src={person.imageUrl} />\n                <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>\n              </Avatar>\n              <div className=\"min-w-0 flex-1\">\n                <a className=\"focus:outline-none\" href=\"#\">\n                  <span aria-hidden=\"true\" className=\"absolute inset-0\" />\n                  <p className=\"text-pretty font-medium text-foreground text-sm\">\n                    {person.name}\n                  </p>\n                  <p className=\"truncate text-pretty text-muted-foreground text-sm\">\n                    {person.role}\n                  </p>\n                </a>\n              </div>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "grid-list"
  ]
}