{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "property-cards-03",
  "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"
  ],
  "files": [
    {
      "path": "examples/blocks/real-estate/property-cards/03/components/property-card.tsx",
      "content": "\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Heart, Bed, Bath, Maximize } from \"lucide-react\";\nimport Image from \"next/image\";\n\nexport interface Property {\n  id: string;\n  image: string;\n  name: string;\n  location: string;\n  price: number;\n  bedrooms: number;\n  bathrooms: number;\n  area: 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>\n      <div className=\"relative aspect-4/3 w-full overflow-hidden\">\n        <Image src={property.image} alt={property.name} fill className=\"rounded-lg object-cover\" />\n        <Button\n          variant=\"outline\"\n          size=\"icon-lg\"\n          className=\"absolute top-4 right-4 rounded-full\"\n          aria-label=\"Add to favorites\">\n          <Heart />\n        </Button>\n      </div>\n\n      {/* Property Details */}\n      <div className=\"space-y-4 py-4\">\n        <div className=\"flex items-start justify-between gap-4\">\n          <div className=\"flex-1 space-y-1\">\n            <h2 className=\"text-foreground text-xl leading-tight font-bold\">{property.name}</h2>\n            <p className=\"text-muted-foreground text-sm\">{property.location}</p>\n          </div>\n          <div className=\"text-lg whitespace-nowrap\">{formatPrice(property.price)}</div>\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <div className=\"border-border bg-background flex items-center gap-2 rounded-full border px-4 py-2\">\n            <Bed className=\"text-muted-foreground size-4\" />\n            <span className=\"text-sm\">{property.bedrooms}</span>\n          </div>\n          <div className=\"border-border bg-background flex items-center gap-2 rounded-full border px-4 py-2\">\n            <Bath className=\"text-muted-foreground size-4\" />\n            <span className=\"text-sm\">{property.bathrooms}</span>\n          </div>\n          <div className=\"border-border bg-background flex items-center gap-2 rounded-full border px-4 py-2\">\n            <Maximize className=\"text-muted-foreground size-4\" />\n            <span className=\"text-sm\">{property.area} m²</span>\n          </div>\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/03/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  name: \"Emerald Bay Residences\",\n  location: \"Gunungkidul, Yogyakarta\",\n  price: 250000,\n  bedrooms: 8,\n  bathrooms: 2.5,\n  area: 410\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
  }
}