{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grid-list-01",
  "type": "registry:block",
  "title": "Grid List with Dropdown",
  "description": "A grid list with dropdown block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "button",
    "card",
    "dropdown-menu"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "path": "content/components/grid-list/grid-list-01.tsx",
      "type": "registry:component",
      "target": "components/grid-list-01.tsx",
      "content": "import { MoreVertical } from 'lucide-react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\nconst bookCollections = [\n  { name: 'Science Fiction', initials: 'SF', href: '#', books: 37 },\n  { name: 'Mystery Thrillers', initials: 'MT', href: '#', books: 29 },\n  { name: 'Historical Fiction', initials: 'HF', href: '#', books: 23 },\n];\n\nexport default function GridList01() {\n  return (\n    <div className=\"flex items-center justify-center p-8\">\n      <div>\n        <h2 className=\"text-balance font-medium text-muted-foreground text-sm\">\n          Favorite Book Collections\n        </h2>\n        <ul\n          className=\"mt-3 grid grid-cols-1 gap-5 sm:gap-6 lg:grid-cols-3\"\n          role=\"list\"\n        >\n          {bookCollections.map((collection) => (\n            <li className=\"col-span-1\" key={collection.name}>\n              <Card className=\"flex w-full flex-row gap-0 overflow-hidden rounded-md py-0 shadow-2xs\">\n                <div className=\"flex w-16 shrink-0 items-center justify-center bg-primary font-medium text-primary-foreground text-sm\">\n                  {collection.initials}\n                </div>\n                <CardContent className=\"flex flex-1 items-center justify-between truncate bg-card p-0\">\n                  <div className=\"flex-1 truncate px-4 py-2 text-sm\">\n                    <a\n                      className=\"font-medium text-foreground hover:text-muted-foreground\"\n                      href={collection.href}\n                    >\n                      {collection.name}\n                    </a>\n                    <p className=\"text-pretty text-muted-foreground\">\n                      {collection.books} Books\n                    </p>\n                  </div>\n                  <div className=\"shrink-0 pr-2\">\n                    <DropdownMenu>\n                      <DropdownMenuTrigger\n                        render={\n                          <Button\n                            className=\"h-8 w-8 rounded-full\"\n                            size=\"icon\"\n                            type=\"button\"\n                            variant=\"ghost\"\n                          />\n                        }\n                      >\n                        <span className=\"sr-only\">Open options</span>\n                        <MoreVertical className=\"h-5 w-5\" />\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\">\n                        <DropdownMenuItem>View collection</DropdownMenuItem>\n                        <DropdownMenuItem>Edit collection</DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem>Share collection</DropdownMenuItem>\n                        <DropdownMenuItem className=\"text-destructive hover:bg-destructive/10 hover:text-destructive focus:bg-destructive/10 focus:text-destructive\">\n                          Delete collection\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </div>\n                </CardContent>\n              </Card>\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n}\n"
    }
  ],
  "categories": [
    "grid-list"
  ]
}