/* global React, fmt, I, MiniMap */ // Three card concepts for House Hunt Diary. // // All cards share: // - hero image area (placeholder) // - source badge // - location signal // - title / price / facts // - private/public dot // - graceful degradation when data is missing // // They differ in HOW location is treated and how much editorial weight vs // utility weight they carry. // ───────────────────────────────────────────────────────────── // Shared bits // ───────────────────────────────────────────────────────────── function HeroImg({ p, h, label }) { return (
{/* a faint lighter band — feels like a real photo without drawing one */}
); } function SourceBadge({ source, dark = false, position = 'topleft' }) { const isPrivate = source === 'private'; const text = isPrivate ? 'Added by you' : `via ${source}`; const pos = { topleft: { top: 10, left: 10 }, topright: { top: 10, right: 10 }, bottomleft: { bottom: 10, left: 10 }, }[position]; return (
{!isPrivate && } {text}
); } function VisibilityDot({ visibility, mode = 'soft' }) { // mode: soft | strong const isPublic = visibility === 'public'; if (mode === 'soft') { return ( {isPublic ? 'Public' : 'Private'} ); } return ( {isPublic ? I.globe(11) : I.lock(11)} {isPublic ? 'Public' : 'Private'} ); } function StatusPip({ status }) { if (!status) return null; const map = { shortlisted: { color: 'var(--shortlist)', label: 'Shortlisted', icon: I.bookmark(10, true) }, visited: { color: 'var(--visited)', label: 'Visited', icon: I.eye(10) }, favorite: { color: 'var(--accent)', label: 'Favorite', icon: I.heart(10, true) }, }; const s = map[status]; if (!s) return null; return ( {s.icon}{s.label} ); } // ───────────────────────────────────────────────────────────── // Concept A — Editorial / Pinterest-like // Image-forward. Location is a quiet neighborhood subtitle, set in serif. // Facts collapse into a single line of meta that gracefully shrinks. // ───────────────────────────────────────────────────────────── function CardEditorial({ p, w = 280 }) { const h = Math.round(w * (p.aspect || 1)); const facts = fmt.facts(p); return (
{p.status && (
{p.status === 'shortlisted' && I.bookmark(11, true)} {p.status === 'visited' && I.eye(11)} {p.status === 'favorite' && I.heart(11, true)} {p.status[0].toUpperCase() + p.status.slice(1)}
)}
{p.title}
{p.neighborhood} · {p.city.split(',')[0]}
{fmt.price(p.price)} {facts.length ? facts.join(' · ') : details pending}
{p.note && (
"{p.note}"
)}
Saved {p.saved}
); } // ───────────────────────────────────────────────────────────── // Concept B — Utility / Location-forward // Mini-map sliver runs across the BOTTOM of the image area. Neighborhood // chip overlays the corner. Tighter, more structured. Card is constant // aspect ratio so the grid stays uniform — better for scanning many. // ───────────────────────────────────────────────────────────── function CardUtility({ p, w = 280 }) { const facts = fmt.facts(p); return (
{/* neighborhood chip — over image, near bottom */}
{I.pin(11)} {p.neighborhood}
{p.status && (
{p.status === 'shortlisted' && I.bookmark(13, true)} {p.status === 'visited' && I.eye(13)} {p.status === 'favorite' && I.heart(13, true)}
)}
{/* the location strip — mini-map ribbon */}
{p.commute && (
{p.commute}
)}
{p.title}
{fmt.price(p.price)}
{facts.length ? facts.map((f, i) => ( {f.includes('bd') && I.bed(12)} {f.includes('ba') && I.bath(12)} {f.includes('sf') && I.sqft(12)} {f} )) : incomplete listing}
Saved {p.saved}
); } // ───────────────────────────────────────────────────────────── // Concept C — Hybrid (RECOMMENDED) // Editorial face by default. On hover (desktop) the bottom 1/3 of the image // peels back to reveal a mini-map + commute. Location-as-progressive- // disclosure. Below the image: neighborhood subtitle (always visible), // title in serif, price, facts. Notes appear if present. Variable aspect // ratio supports masonry feel without becoming chaotic. // ───────────────────────────────────────────────────────────── function CardHybrid({ p, w = 280, mapPeek = false }) { const [hover, setHover] = React.useState(false); const showMap = hover || mapPeek; const h = Math.round(w * (p.aspect || 1) * 0.78); // a bit less tall than editorial return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ width: w, background: 'transparent', }}>
{p.status && (
)} {/* peeling map drawer */}
{I.pin(11)} {p.neighborhood} · {p.region}
{p.commute && (
{p.commute}
)}
{p.title}
{p.neighborhood} {p.region}
{fmt.price(p.price)} {fmt.facts(p).length ? fmt.facts(p).join(' · ') : details pending}
{p.note && (
{I.note(11)} {p.note}
)}
Saved {p.saved} {p.status && <>}
); } function StatusBadgeOverlay({ status }) { const map = { shortlisted: { color: 'var(--shortlist)', icon: I.bookmark(11, true), label: 'Shortlisted' }, visited: { color: 'var(--visited)', icon: I.eye(11), label: 'Visited' }, favorite: { color: 'var(--accent)', icon: I.heart(11, true), label: 'Favorite' }, }; const s = map[status]; if (!s) return null; return ( {s.icon}{s.label} ); } Object.assign(window, { CardEditorial, CardUtility, CardHybrid, HeroImg, SourceBadge, VisibilityDot, StatusPip, StatusBadgeOverlay, });