{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "product-grid",
  "type": "registry:block",
  "title": "Product Grid",
  "description": "E-commerce product listing with search, filters, and product cards",
  "dependencies": [
    "@heroicons/react"
  ],
  "registryDependencies": [
    "https://wireframe-ui.vercel.app/r/card.json",
    "https://wireframe-ui.vercel.app/r/text.json",
    "https://wireframe-ui.vercel.app/r/badge.json",
    "https://wireframe-ui.vercel.app/r/button.json",
    "https://wireframe-ui.vercel.app/r/media.json",
    "https://wireframe-ui.vercel.app/r/heading.json",
    "https://wireframe-ui.vercel.app/r/select.json",
    "https://wireframe-ui.vercel.app/r/input.json"
  ],
  "files": [
    {
      "path": "registry/new-york/blocks/product-grid.tsx",
      "content": "'use client'\r\n\r\nimport {\r\n  Card,\r\n  CardContent,\r\n  CardDescription,\r\n  CardHeader,\r\n  CardTitle,\r\n} from '@/registry/new-york/ui/card'\r\nimport { Text } from '@/registry/new-york/ui/text'\r\nimport { Badge } from '@/registry/new-york/ui/badge'\r\nimport { Button } from '@/registry/new-york/ui/button'\r\nimport { Media } from '@/registry/new-york/ui/media'\r\nimport { Heading } from '@/registry/new-york/ui/heading'\r\nimport {\r\n  Select,\r\n  SelectContent,\r\n  SelectItem,\r\n  SelectTrigger,\r\n  SelectValue,\r\n} from '@/registry/new-york/ui/select'\r\nimport { Input } from '@/registry/new-york/ui/input'\r\nimport {\r\n  HeartIcon,\r\n  MagnifyingGlassIcon,\r\n  ShoppingCartIcon,\r\n  SparklesIcon,\r\n} from '@heroicons/react/24/outline'\r\n\r\nexport function ProductGrid() {\r\n  return (\r\n    <div className=\"container mx-auto space-y-8 p-6\">\r\n      <div className=\"flex flex-col gap-4 md:flex-row md:items-center md:justify-between\">\r\n        <div className=\"space-y-1\">\r\n          <Heading level={2} />\r\n          <Text width=\"lg\" color=\"muted\" size=\"sm\" />\r\n        </div>\r\n        <div className=\"flex gap-2\">\r\n          <div className=\"relative flex-1 md:w-64\">\r\n            <Input\r\n              variant=\"wireframe\"\r\n              skeletonIcon={<MagnifyingGlassIcon className=\"text-muted-foreground\" />}\r\n            />\r\n          </div>\r\n          <Select>\r\n            <SelectTrigger className=\"w-[140px]\">\r\n              <SelectValue>\r\n                <Text width=\"xs\" />\r\n              </SelectValue>\r\n            </SelectTrigger>\r\n            <SelectContent>\r\n              <SelectItem value=\"popular\">\r\n                <Text width=\"sm\" />\r\n              </SelectItem>\r\n              <SelectItem value=\"newest\">\r\n                <Text width=\"sm\" />\r\n              </SelectItem>\r\n              <SelectItem value=\"price\">\r\n                <Text width=\"sm\" />\r\n              </SelectItem>\r\n            </SelectContent>\r\n          </Select>\r\n        </div>\r\n      </div>\r\n\r\n      <div className=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4\">\r\n        {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (\r\n          <Card key={i} className=\"group overflow-hidden\">\r\n            <div className=\"relative\">\r\n              <Media type=\"image\" className=\"aspect-square w-full\" />\r\n              <div className=\"absolute top-2 right-2 flex gap-2\">\r\n                <Button\r\n                  size=\"icon\"\r\n                  variant=\"secondary\"\r\n                  className=\"h-8 w-8 opacity-0 transition-opacity group-hover:opacity-100\"\r\n                >\r\n                  <HeartIcon className=\"text-muted-foreground\" />\r\n                </Button>\r\n              </div>\r\n              {i % 3 === 0 && (\r\n                <Badge className=\"absolute top-2 left-2\">\r\n                  <Text width=\"xs\" />\r\n                </Badge>\r\n              )}\r\n            </div>\r\n            <CardHeader className=\"space-y-2 p-4\">\r\n              <div className=\"flex items-start justify-between gap-2\">\r\n                <CardTitle className=\"line-clamp-2\">\r\n                  <Text width=\"md\" truncate />\r\n                </CardTitle>\r\n              </div>\r\n              <CardDescription>\r\n                <Text width=\"sm\" color=\"muted\" size=\"sm\" truncate />\r\n              </CardDescription>\r\n              <div className=\"flex items-center gap-1\">\r\n                {[1, 2, 3, 4, 5].map((star) => (\r\n                  <SparklesIcon\r\n                    key={star}\r\n                    className={\r\n                      star <= 4\r\n                        ? 'size-3.5 fill-yellow-400 text-yellow-400'\r\n                        : 'text-muted-foreground size-3.5'\r\n                    }\r\n                  />\r\n                ))}\r\n                <Text width=\"xs\" color=\"muted\" size=\"xs\" className=\"ml-1\" />\r\n              </div>\r\n            </CardHeader>\r\n            <CardContent className=\"flex items-center justify-between p-4 pt-0\">\r\n              <Text width=\"sm\" emphasis=\"primary\" size=\"lg\" />\r\n              <Button size=\"sm\">\r\n                <ShoppingCartIcon className=\"text-muted-foreground\" />\r\n                <Text width=\"xs\" />\r\n              </Button>\r\n            </CardContent>\r\n          </Card>\r\n        ))}\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n",
      "type": "registry:block",
      "target": "components/blocks/product-grid.tsx"
    }
  ]
}