{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "listing-card",
  "type": "registry:block",
  "title": "Listing Card",
  "description": "A listing card with a name, location, rating, and review count.",
  "files": [
    {
      "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"
    }
  ]
}