62:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 63:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 64:T73ed,'use client' import * as React from 'react' import { BadgeCheck, Bath, BedDouble, Box, Calculator, Calendar, Camera, Check, ChevronLeft, ChevronRight, Compass, Heart, Mail, MapPin, Maximize2, Share2, } from 'lucide-react' import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { Card, CardContent } from '@/components/ui/card' import { Separator } from '@/components/ui/separator' import { cn } from '@/lib/utils' export interface PropertyItem { id: string title: string propertyType: string category: 'all' | 'single-family' | 'waterfront' | 'penthouse' price: number mortgageEst: string address: { street: string cityStateZip: string neighborhood: string } specs: { beds: number baths: number sqft: number pricePerSqft: number yearBuilt: number lotSize: string } badge: { label: string variant: 'default' | 'secondary' | 'outline' | 'destructive' } hasVirtualTour: boolean openHouse: string totalPhotos: number images: string[] tags: string[] agent: { name: string brokerage: string avatar: string initials: string badge: string } } export interface PropertyListingCardProps { className?: string } const PROPERTIES: PropertyItem[] = [ { id: 'prop-pasadena', title: 'Mid-Century Modern Architectural Sanctuary', propertyType: 'Single Family Residence', category: 'single-family', price: 1245000, mortgageEst: 'Est. $6,420 / mo', address: { street: '742 Evergreen Terrace', cityStateZip: 'Pasadena, CA 91101', neighborhood: 'San Rafael Hills', }, specs: { beds: 4, baths: 3.5, sqft: 2850, pricePerSqft: 437, yearBuilt: 1962, lotSize: '0.34 Acres', }, badge: { label: 'New Listing', variant: 'default', }, hasVirtualTour: true, openHouse: 'Open Sun 1:00 – 4:00 PM', totalPhotos: 18, images: [ 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1600566753086-00f18fb6b3ea?w=1200&auto=format&fit=crop&q=80', ], tags: ['Swimming Pool', 'Solar Panels', '2-Car Garage', 'Modern Kitchen', 'Mountain View'], agent: { name: 'Elena Rostova', brokerage: "Sotheby's International Realty", avatar: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=200&auto=format&fit=crop&q=80', initials: 'ER', badge: 'Top 1% Producer', }, }, { id: 'prop-carmel', title: 'Coastal Craftsman Villa with Ocean Vista', propertyType: 'Luxury Waterfront Estate', category: 'waterfront', price: 2890000, mortgageEst: 'Est. $14,850 / mo', address: { street: '1840 Ocean View Avenue', cityStateZip: 'Carmel-by-the-Sea, CA 93921', neighborhood: 'Point Lobos Highlands', }, specs: { beds: 5, baths: 4.5, sqft: 4120, pricePerSqft: 701, yearBuilt: 2021, lotSize: '0.52 Acres', }, badge: { label: 'Price Drop $100k', variant: 'secondary', }, hasVirtualTour: true, openHouse: 'Private Viewings Only', totalPhotos: 24, images: [ 'https://images.unsplash.com/photo-1512917774080-9991f1c4c750?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1600585152220-90363fe7e115?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1600573472592-401b489a3cdc?w=1200&auto=format&fit=crop&q=80', ], tags: ['Ocean Frontage', 'Wine Cellar', 'Infinity Pool', 'Smart Automation', 'Chef Kitchen'], agent: { name: 'Marcus Vance', brokerage: 'Compass Premier Collection', avatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=200&auto=format&fit=crop&q=80', initials: 'MV', badge: 'Luxury Director', }, }, { id: 'prop-downtown', title: 'Skyline Glass Penthouse & Private Terrace', propertyType: 'High-Rise Penthouse Condo', category: 'penthouse', price: 895000, mortgageEst: 'Est. $4,680 / mo', address: { street: '450 S Grand Avenue, Unit 38B', cityStateZip: 'Los Angeles, CA 90071', neighborhood: 'Bunker Hill Downtown', }, specs: { beds: 2, baths: 2.0, sqft: 1640, pricePerSqft: 545, yearBuilt: 2019, lotSize: 'HOA $620 / mo', }, badge: { label: 'Just Listed', variant: 'default', }, hasVirtualTour: true, openHouse: 'Open Sat 2:00 – 5:00 PM', totalPhotos: 14, images: [ 'https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1502672260266-1c1ef2d93688?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1556911220-e15b29be8c8f?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1513694203232-719a280e022f?w=1200&auto=format&fit=crop&q=80', 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=1200&auto=format&fit=crop&q=80', ], tags: ['Private Terrace', '24/7 Concierge', 'Floor-to-Ceiling Windows', 'EV Parking', 'Fitness Center'], agent: { name: 'Aria Chen', brokerage: 'Coldwell Banker Global Luxury', avatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=200&auto=format&fit=crop&q=80', initials: 'AC', badge: 'Downtown Specialist', }, }, ] export function PropertyListingCard({ className }: PropertyListingCardProps) { const [activePhotoIndex, setActivePhotoIndex] = React.useState>({ 'prop-pasadena': 0, 'prop-carmel': 0, 'prop-downtown': 0, }) const [wishlistedIds, setWishlistedIds] = React.useState>(new Set(['prop-pasadena'])) const [scheduledTourIds, setScheduledTourIds] = React.useState>(new Set()) const [contactedAgentIds, setContactedAgentIds] = React.useState>(new Set()) const [copiedLinkId, setCopiedLinkId] = React.useState(null) const [activeCategoryFilter, setActiveCategoryFilter] = React.useState('all') const [activeTourModalId, setActiveTourModalId] = React.useState(null) const getPhotoIndex = (id: string): number => { return activePhotoIndex[id] ?? 0 } const prevPhoto = (id: string, total: number) => { const current = getPhotoIndex(id) setActivePhotoIndex((prev) => ({ ...prev, [id]: (current - 1 + total) % total, })) } const nextPhoto = (id: string, total: number) => { const current = getPhotoIndex(id) setActivePhotoIndex((prev) => ({ ...prev, [id]: (current + 1) % total, })) } const setPhoto = (id: string, index: number) => { setActivePhotoIndex((prev) => ({ ...prev, [id]: index, })) } const toggleWishlist = (id: string) => { setWishlistedIds((prev) => { const next = new Set(prev) if (next.has(id)) { next.delete(id) } else { next.add(id) } return next }) } const isWishlisted = (id: string): boolean => { return wishlistedIds.has(id) } const toggleScheduleTour = (id: string) => { setScheduledTourIds((prev) => { const next = new Set(prev) if (next.has(id)) { next.delete(id) } else { next.add(id) } return next }) } const isTourScheduled = (id: string): boolean => { return scheduledTourIds.has(id) } const toggleContactAgent = (id: string) => { setContactedAgentIds((prev) => { const next = new Set(prev) if (next.has(id)) { next.delete(id) } else { next.add(id) } return next }) } const isAgentContacted = (id: string): boolean => { return contactedAgentIds.has(id) } const shareListing = (id: string) => { const url = `https://uipkge.dev/listings/${id}` if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) { navigator.clipboard.writeText(url) } setCopiedLinkId(id) setTimeout(() => { setCopiedLinkId((curr) => (curr === id ? null : curr)) }, 2000) } const toggleVirtualTour = (id: string) => { setActiveTourModalId((curr) => (curr === id ? null : id)) } const formatPrice = (amount: number): string => { return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }).format(amount) } const filteredProperties = React.useMemo(() => { if (activeCategoryFilter === 'all') { return PROPERTIES } return PROPERTIES.filter((p) => p.category === activeCategoryFilter) }, [activeCategoryFilter]) return (

{/* Header & Category Switcher */}

Featured Property Listings

{filteredProperties.length} Active

Browse verified real estate properties with interactive photo galleries, mortgage calculations, and 3D walkthroughs.

{/* Category Filter Pills */}

{/* Properties Grid */}

{filteredProperties.map((prop) => { const currentIndex = getPhotoIndex(prop.id) const wishlisted = isWishlisted(prop.id) const tourScheduled = isTourScheduled(prop.id) const agentContacted = isAgentContacted(prop.id) const copied = copiedLinkId === prop.id const tourModalActive = activeTourModalId === prop.id return ( {/* 1. Image Carousel Gallery Hero (16:9 Aspect Ratio) */}

{/* Active Image */} {`${prop.title}

{/* Gradient Overlays for High-Contrast Readable Badges */}

{/* Top Overlay: Badges and Wishlist Button */}

{ { default: prop.badge.label, secondary: prop.badge.label, outline: prop.badge.label, destructive: prop.badge.label, }[prop.badge.variant] } {prop.hasVirtualTour && ( )}

{/* Wishlist Heart Button */}

{/* Chevron Carousel Controls (Appear on hover or focus) */} {/* Bottom Hero Overlay: Photo Counter, Dots, and Open House Tag */}

{/* Photo Counter Pill */} {currentIndex + 1} / {prop.totalPhotos} Photos {/* Image Dots / Indicators */}

{prop.images.map((_, index) => (

{/* Virtual Tour Active Banner Callout */} {tourModalActive && (

3D Virtual Space Initialized

Interactive 360° LiDAR spatial model active for {prop.address.street}.

)}

{/* 2. Card Content & Specifications */}

{/* Price & Mortgage Estimate Row */}

{formatPrice(prop.price)}

{prop.mortgageEst}

{prop.propertyType}

{/* Specs Pill Grid (Beds, Baths, SqFt, $/SqFt) */}

{/* Beds */}

{prop.specs.beds}

Beds

{/* Baths */}

{prop.specs.baths}

Baths

{/* Sq Ft */}

{prop.specs.sqft.toLocaleString()}

Sq Ft

{/* Price Per Sq Ft */}

${prop.specs.pricePerSqft}

/ sqft

{/* Address & Neighborhood */}

{prop.address.street}

{prop.address.cityStateZip} · {prop.address.neighborhood}

{/* Key Features Tags */}

{prop.tags.map((tag) => ( {tag} ))}

{/* Footer Area: Agent Attribution & Action Buttons */}

{/* Agent / Broker Attribution */}

{ { fallback: prop.agent.initials, }.fallback }

Listed by {prop.agent.name}

{prop.agent.brokerage}

{/* Share Action Button */}

{/* Action Buttons: Schedule Tour & Contact Agent */}

) })}

) } export default PropertyListingCard 61:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L62",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/avatar.json","https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/card.json","https://uipkge.dev/r/react/separator.json"]}]]}],null]}],["$","$L63",null,{"files":[{"path":"packages/registry-react/blocks/property-listing-card/PropertyListingCard.tsx","content":"$64","type":"registry:block","target":"~/components/blocks/PropertyListingCard.tsx"}],"className":"h-[70svh] min-h-80"}]]}]