{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "property-cards-02",
  "type": "registry:component",
  "title": "Property Cards",
  "author": "Toby Belhome",
  "description": "Showcase your properties elegantly with Tailwind CSS property cards. These cards combine images, titles, prices, and brief details into visually appealing layouts, making navigation intuitive and engaging. They are perfect for real estate websites and marketplaces aiming for modern, organized, and conversion-friendly screens.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "badge"
  ],
  "files": [
    {
      "path": "examples/blocks/real-estate/property-cards/02/components/property-card.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { Heart, Bed, Bath, Maximize } from \"lucide-react\";\nimport Image from \"next/image\";\nimport { Badge } from \"@/components/ui/badge\";\n\nexport interface Property {\n  id: string;\n  image: string;\n  price: number;\n  type: string;\n  address: string;\n  city: string;\n  postcode: string;\n  bedrooms: number;\n  bathrooms: number;\n  sqft: number;\n}\n\ninterface PropertyCardProps {\n  property: Property;\n}\n\nexport function PropertyCard({ property }: PropertyCardProps) {\n  const formatPrice = (price: number) => {\n    return new Intl.NumberFormat(\"en-US\", {\n      style: \"currency\",\n      currency: \"USD\",\n      minimumFractionDigits: 0,\n      maximumFractionDigits: 0\n    }).format(price);\n  };\n\n  return (\n    <div className=\"bg-card overflow-hidden rounded-lg border\">\n      <div className=\"relative aspect-16/9 w-full overflow-hidden\">\n        <Image\n          src={property.image}\n          alt={`${property.address}, ${property.city}`}\n          fill\n          className=\"object-cover\"\n        />\n        {/* Price Badge */}\n        <Badge className=\"absolute top-4 right-4 rounded-full px-4 py-2 text-lg font-semibold\">\n          {formatPrice(property.price)}\n        </Badge>\n      </div>\n\n      {/* Property Details */}\n      <div className=\"space-y-4 p-6\">\n        <p className=\"text-muted-foreground text-sm\">{property.type}</p>\n\n        <h4 className=\"text-foreground text-xl leading-tight font-bold\">\n          {property.address}, {property.city} {property.postcode}\n        </h4>\n\n        {/* Features */}\n        <div className=\"text-muted-foreground flex items-center gap-6\">\n          <div className=\"flex items-center gap-2\">\n            <Bed className=\"size-4\" />\n            <span className=\"text-sm\">{property.bedrooms} Bed</span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Bath className=\"size-4\" />\n            <span className=\"text-sm\">{property.bathrooms} Bath</span>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Maximize className=\"size-4\" />\n            <span className=\"text-sm\">{property.sqft.toLocaleString()} Sqft</span>\n          </div>\n        </div>\n\n        {/* Actions */}\n        <div className=\"flex items-center gap-3 pt-2\">\n          <Button variant=\"secondary\" className=\"w-full flex-1\">\n            More Details\n          </Button>\n          <Button variant=\"outline\" size=\"icon\" className=\"rounded-full\">\n            <Heart />\n            <span className=\"sr-only\">Add to favorites</span>\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/property-cards/components/property-card.tsx"
    },
    {
      "path": "examples/blocks/real-estate/property-cards/02/page.tsx",
      "content": "import { PropertyCard } from \"./components/property-card\";\n\nconst property = {\n  id: \"1\",\n  image:\n    \"https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=500\",\n  price: 231599,\n  type: \"Apartment for sale\",\n  address: \"1110/410 Elizabeth Street\",\n  city: \"Melbourne VIC\",\n  postcode: \"3000\",\n  bedrooms: 2,\n  bathrooms: 1,\n  sqft: 1440\n};\n\nexport default function Home() {\n  return (\n    <div className=\"mx-auto space-y-6 px-4 py-10 sm:w-[400px]\">\n      <PropertyCard key={property.id} property={property} />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/property-cards/property-cards.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}