Python 49.6%
TypeScript 25.5%
CSS 24.1%
1// -----------------------------------------------------------------------------2// Home-Ka — US real-estate aggregator (Groupe KA)3// Author: Simon-Pierre Boucher — contact@spboucher.ai4// components/PropertyImg.tsx : robust property image5// · <TypeFallback/> : elegant PER-PROPERTY-TYPE fallback in Home-Ka colors —6// never a broken-image icon or a gray void.7// · <PropertyImg/> : <img> with automatic fallback if the URL fails to load.8// -----------------------------------------------------------------------------9import { useState } from "react";10import { Ico } from "./Icons";1112const TYPE_ICONS: Record<string, string> = {13 "Single Family": "home", "Single-Family": "home", "House": "home",14 "Townhouse": "home", "Mobile Home": "home", "Manufactured": "home",15 "Cabin": "tree", "Condo": "building", "Condominium": "building",16 "Apartment": "building", "Multi-Family": "building", "Duplex": "building",17 "Triplex": "building", "Land": "land", "Lot": "land", "Farm": "leaf",18 "Ranch": "leaf", "Commercial": "cart",19};2021/** Fallback image per property type (green gradient + icon + label). */22export function TypeFallback({ type, label = true }: { type?: string; label?: boolean }) {23 const ico = TYPE_ICONS[type ?? ""] ?? "home";24 return (25 <div className="type-fallback" aria-label={type || "Property"}>26 <Ico name={ico} size={40} />27 {label && <span>{type || "Photos coming soon"}</span>}28 </div>29 );30}3132/** <img> that switches to the type fallback if loading fails. */33export default function PropertyImg({34 src, alt, type, eager = false,35}: { src?: string | null; alt: string; type?: string; eager?: boolean }) {36 const [broken, setBroken] = useState(false);37 if (!src || broken) return <TypeFallback type={type} />;38 return (39 <img40 src={src}41 alt={alt}42 loading={eager ? "eager" : "lazy"}43 decoding="async"44 onError={() => setBroken(true)}45 />46 );47}48