// ECR Property Summary — UI components // ── PhotoCanvas ──────────────────────────────────────────────────────────── // Generative "placeholder" photo using the property's palette + diagonal motif function PhotoCanvas({ property, variant = 0, large = false }) { const [a, b, c] = property.palette; const seedHash = (property.id + variant).split('').reduce((s, ch) => s + ch.charCodeAt(0), 0); // Choose a layout based on variant const layoutIdx = (variant + seedHash) % 4; // Building geometry strokes const renderLayout = () => { if (property.type === 'Land') { return ( <> {/* horizon line and sun */} {[...Array(8)].map((_, i) => ( ))} ); } if (property.type === 'Industrial') { return ( <> {/* Warehouse silhouette */} {/* dock doors */} {[0,1,2,3,4,5].map(i => ( ))} {/* sawtooth roof */} {/* diagonal sky band — logo motif */} ); } if (property.type === 'Medical') { return ( <> {/* Med campus — multi-block */} {/* windows grid */} {[0,1,2,3,4,5,6].map(row => [0,1,2,3].map(col => ( )) )} {[0,1,2,3,4,5,6].map(row => [0,1].map(col => ( )) )} {/* diagonal band */} ); } // Office variants if (layoutIdx === 0) { // Tall tower centered return ( <> {/* window grid on tower */} {[...Array(10)].map((_, row) => [0,1,2,3].map(col => ( )) )} {/* diagonal stripe */} ); } if (layoutIdx === 1) { // Stepped horizontal return ( <> {/* windows */} {[...Array(8)].map((_, row) => [0,1,2,3].map(col => ( )) )} {[...Array(6)].map((_, row) => [0,1,2,3].map(col => ( )) )} ); } if (layoutIdx === 2) { // Mid-rise with foreground silhouette return ( <> {/* sky diagonal */} {/* curtain wall vertical mullions */} {[...Array(8)].map((_, i) => ( ))} {/* horizontal floor lines */} {[...Array(9)].map((_, i) => ( ))} {/* foreground trees */} ); } // layout 3 — twin towers return ( <> {/* skybridge */} {/* windows */} {[...Array(11)].map((_, row) => [0,1,2].map(col => ( )) )} {[...Array(9)].map((_, row) => [0,1,2].map(col => ( )) )} ); }; return ( {renderLayout()} {large && ( <> {/* Caption block bottom-left for hero photo */} {property.id} · {variant === 0 ? 'EXTERIOR' : variant === 1 ? 'LOBBY' : variant === 2 ? 'FLOOR PLATE' : variant === 3 ? 'AMENITIES' : 'SITE'} )} ); } // ── Header ───────────────────────────────────────────────────────────────── function SiteHeader() { const links = ['Properties', 'Services', 'Team', 'About', 'Contact']; return (
ECR
512.505.0000 ecrtx.com
); } // ── Footer ───────────────────────────────────────────────────────────────── function SiteFooter() { return ( ); } // ── Toolbar (filters / sort / favs) ──────────────────────────────────────── const TYPE_FILTERS = ['All', 'Office', 'Industrial', 'Medical', 'Land']; const SORT_OPTIONS = [ { id: 'default', label: 'Featured' }, { id: 'sf-desc', label: 'Size · High → Low' }, { id: 'sf-asc', label: 'Size · Low → High' }, { id: 'rate-asc', label: 'Rate · Low → High' }, { id: 'rate-desc', label: 'Rate · High → Low' }, ]; function FilterToolbar({ count, total, typeFilter, onTypeFilter, status, onStatus, sort, onSort, favCount, showFavs, onToggleFavs, }) { return (
{/* Title block */}
Property Summary
Austin Market · 2026
{/* Type filter pills */}
{TYPE_FILTERS.map(t => { const active = typeFilter === t; return ( ); })}
{/* Status filter */}
{['All', 'For Lease', 'For Sale'].map(s => { const active = status === s; return ( ); })}
{/* Result count */}
Showing
{count} / {total}
{/* Sort dropdown */}
Sort By
{/* Favorites toggle */}
); } // ── Icons ────────────────────────────────────────────────────────────────── function HeartIcon({ size = 14, filled = false, color = '#D6001C' }) { return ( ); } function ArrowIcon({ size = 12, dir = 'right', color = '#3F4443' }) { const rot = { right: 0, left: 180, up: -90, down: 90 }[dir]; return ( ); } function CloseIcon({ size = 14, color = '#3F4443' }) { return ( ); } // ── Compact list card (right column) ────────────────────────────────────── function ListCard({ property, index, isActive, isFav, onClick, onHover, onToggleFav }) { const [hov, setHov] = React.useState(false); return (
{ setHov(true); onHover && onHover(property.id); }} onMouseLeave={() => { setHov(false); onHover && onHover(null); }} style={{ display: 'flex', gap: 12, background: ECR.white, padding: 10, border: `1px solid ${isActive ? ECR.charcoal : ECR.grayLight}`, borderLeft: `4px solid ${isActive ? ECR.red : TYPE_COLORS[property.type]}`, cursor: 'pointer', boxShadow: isActive ? '0 6px 18px rgba(63,68,67,0.15)' : (hov ? '0 4px 10px rgba(63,68,67,0.08)' : 'none'), transition: 'box-shadow 180ms, border-color 180ms', position: 'relative', }} > {/* Pin number */}
{index + 1}
{/* Mini thumb */}
{/* Body */}
{property.type} · {property.status}
{property.name}
{property.submarket}
{property.sf >= 100000 ? `${(property.sf / 43560).toFixed(0)} ` : property.sf.toLocaleString()} {property.sf >= 100000 && property.type === 'Land' ? 'AC' : 'SF'}
{property.rate}
); } // ── Detail Panel (the "photo box" on the right) ────────────────────────── function DetailPanel({ property, isFav, onToggleFav, onOpenFullscreen }) { const [photoIdx, setPhotoIdx] = React.useState(0); React.useEffect(() => { setPhotoIdx(0); }, [property.id]); const photoLabels = ['Exterior', 'Lobby', 'Floor Plate', 'Amenities', 'Site']; const sfDisplay = property.type === 'Land' ? `${(property.sf / 43560).toFixed(1)} acres` : `${property.sf.toLocaleString()} SF`; return (
{/* Hero photo */}
{/* Top-left type/status badge */}
{property.type} {property.status}
{/* Top-right favorite */} {/* Photo nav arrows */} {/* Photo index bottom right */}
{photoIdx + 1} / {photoLabels.length} · {photoLabels[photoIdx]}
{/* Thumbnail strip */}
{photoLabels.map((label, i) => (
setPhotoIdx(i)} style={{ width: 76, height: 56, cursor: 'pointer', outline: photoIdx === i ? `2px solid ${ECR.red}` : `1px solid ${ECR.grayLight}`, outlineOffset: photoIdx === i ? -2 : -1, opacity: photoIdx === i ? 1 : 0.75, transition: 'opacity 150ms', }} >
))}
{/* Scrollable details */}
{/* Header */}
{property.submarket}

{property.name}

{property.address}
{property.city}
{/* Key stats — banner */}
{[ { label: property.type === 'Land' ? 'Acreage' : 'Size', value: sfDisplay }, { label: property.status === 'For Sale' ? 'Price' : 'Rate', value: property.rate }, { label: 'Available', value: property.available }, ].map((s, i) => (
{s.label}
{s.value}
))}
{/* Description */}

{property.description}

{/* Detail grid */}
Property Details
{[ ['Property ID', property.id], ['Type', property.type], ['Floor / Suite', property.floorSuite], ['Min. Divisible', property.minDivSf >= property.sf ? '— full only' : (property.type === 'Land' ? `${(property.minDivSf / 43560).toFixed(1)} acres` : `${property.minDivSf.toLocaleString()} SF`)], ['Year Built', property.yearBuilt || '—'], ['Renovated', property.renovated || '—'], ['Parking Ratio', property.parking], ['Walk Score®', `${property.walkScore} / 100`], ].map(([k, v]) => (
{k} {v}
))}
{/* Amenities */}
Walkability + Amenities
{property.amenities.map(a => ( {a} ))}
{/* Broker */}
{property.broker.name.split(' ').map(n => n[0]).slice(0,2).join('')}
Listing Broker
{property.broker.name}
{property.broker.title}
{property.broker.phone}
{property.broker.email}
{/* Primary CTA */} {/* Secondary actions */}
); } Object.assign(window, { SiteHeader, SiteFooter, FilterToolbar, ListCard, DetailPanel, PhotoCanvas, HeartIcon, ArrowIcon, CloseIcon, SORT_OPTIONS, TYPE_FILTERS, });