{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "listing-grid",
  "type": "registry:block",
  "title": "Listing Grid",
  "description": "A grid of listing cards.",
  "registryDependencies": [
    "@alpine/listing-card"
  ],
  "files": [
    {
      "path": "registry/alpine/listing/listing-grid.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { ListingCard } from \"@/registry/alpine/listing/listing-card\"\n\nexport function ListingGrid({\n  heading,\n  subheading,\n  listings,\n  className,\n}: {\n  heading?: string\n  subheading?: string\n  listings: {\n    name: string\n    location: string\n    imageUrl: string\n    rating: number\n    reviewCount: number\n  }[]\n  className?: string\n}) {\n  return (\n    <div className=\"flex flex-col gap-6 min-w-0 w-full\">\n      {heading || subheading ? (\n        <div className=\"flex flex-col gap-1\">\n          <h2 className=\"text-2xl font-bold tracking-tighter\">{heading}</h2>\n          {subheading && <p className=\"text-muted-foreground\">{subheading}</p>}\n        </div>\n      ) : null}\n      <div\n        className={cn(\n          \"grid sm:grid-cols-2 lg:grid-cols-4 gap-6 w-full\",\n          className\n        )}\n      >\n        {listings.map((listing) => (\n          <ListingCard key={listing.name} {...listing} />\n        ))}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/alpine/listing/listing-card.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/alpine/ui/card\"\nimport { StarIcon } from \"lucide-react\"\nimport Image from \"next/image\"\n\nexport function ListingCard({\n  name,\n  location,\n  imageUrl,\n  rating,\n  reviewCount,\n  className,\n}: {\n  name: string\n  location: string\n  imageUrl: string\n  rating: number\n  reviewCount: number\n} & React.ComponentProps<typeof Card>) {\n  return (\n    <Card\n      className={cn(\n        \"w-full p-0 bg-transparent aspect-square border-0 gap-4 min-w-0\",\n        className\n      )}\n    >\n      <CardContent className=\"p-0\">\n        <Image\n          src={imageUrl}\n          alt={name}\n          width={600}\n          height={600}\n          className=\"aspect-square rounded-lg w-full object-cover\"\n        />\n      </CardContent>\n      <CardHeader className=\"p-0 gap-0\">\n        <CardTitle className=\"flex items-center gap-2 text-sm tracking-tight font-medium\">\n          {name}{\" \"}\n          <div className=\"flex items-center gap-1 ml-auto\">\n            <StarIcon className=\"fill-foreground size-3\" /> {rating} (\n            {reviewCount})\n          </div>\n        </CardTitle>\n        <CardDescription>{location}</CardDescription>\n      </CardHeader>\n    </Card>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}