// Wines of Texas — Shared UI components (nav, footer, placeholder, tweaks) // Globals: window.Nav, window.Footer, window.Ph, window.Tweaks, window.useTheme const { useState, useEffect, useCallback, useMemo, useRef } = React; /* --------------------------------------------------------------------- Theme hook — reads/writes [data-theme] on --------------------------------------------------------------------- */ function useTheme() { const [theme, setTheme] = useState(() => { return document.documentElement.getAttribute('data-theme') || localStorage.getItem('wot-theme') || 'editorial'; }); useEffect(() => { document.documentElement.setAttribute('data-theme', theme); localStorage.setItem('wot-theme', theme); }, [theme]); return [theme, setTheme]; } /* --------------------------------------------------------------------- Image / placeholder --------------------------------------------------------------------- Tiered image system: kind="photo" (default) — seeded Picsum photo. Stable per seed. Pass `src` to override with a real URL. kind="stripe" — striped placeholder (schematic slots: maps, etc.) kind="initial" — colored card with a letter (unclaimed winery cards). Background color is hashed from `seed`. --------------------------------------------------------------------- */ const PH_TINTS = [ '#7a1a1a', '#3e5c3a', '#8a5a2b', '#475a7a', '#6b4a6e', '#5a6b3a', '#8a6a4a', '#3a5a5a', '#7a4a3a', '#4a5a6b', ]; function hashSeed(s) { let h = 2166136261 >>> 0; for (let i = 0; i < s.length; i++) { h = Math.imul(h ^ s.charCodeAt(i), 16777619) >>> 0; } return h; } function picsumUrl(seed, w = 1200, h = 800) { const s = String(seed || 'wines-of-texas').replace(/\s+/g, '-').toLowerCase(); return `https://picsum.photos/seed/${encodeURIComponent(s)}/${w}/${h}`; } function Ph({ label = 'photo', aspect = '4/3', style, className = '', kind = 'photo', src, seed, initial, alt, }) { const key = seed || label; if (kind === 'stripe') { return (
{label}
); } if (kind === 'initial') { const tint = PH_TINTS[hashSeed(String(key)) % PH_TINTS.length]; const letter = (initial || String(key).trim().charAt(0) || '?').toUpperCase(); return (
{letter}
); } // photo (default) const url = src || picsumUrl(key); return (
); } /* --------------------------------------------------------------------- Nav --------------------------------------------------------------------- */ function Nav({ active, onNav, theme, setTheme }) { const links = [ { id: 'home', label: 'Home' }, { id: 'directory', label: 'Wineries' }, { id: 'database', label: 'Database' }, { id: 'regions', label: 'Regions' }, { id: 'winery', label: 'Spotlight' }, { id: 'advertise', label: 'Advertise' }, { id: 'claim', label: 'Preview' }, { id: 'portal', label: 'List Winery' }, ]; return (
onNav('home')} style={{ cursor: 'pointer' }}> Wines of Texas EST. 2026
{['editorial','rustic','almanac'].map(t => ( ))}
); } /* --------------------------------------------------------------------- Footer --------------------------------------------------------------------- */ function Footer() { return ( ); } /* --------------------------------------------------------------------- Tweaks panel — toggled by host via __activate_edit_mode --------------------------------------------------------------------- */ function Tweaks({ state, setState }) { const [open, setOpen] = useState(false); useEffect(() => { const onMsg = (e) => { const d = e.data || {}; if (d.type === '__activate_edit_mode') setOpen(true); if (d.type === '__deactivate_edit_mode') setOpen(false); }; window.addEventListener('message', onMsg); // announce availability AFTER listener is live try { window.parent.postMessage({ type: '__edit_mode_available' }, '*'); } catch {} return () => window.removeEventListener('message', onMsg); }, []); if (!open) return null; const persist = (edits) => { try { window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*'); } catch {} }; const set = (key, val) => { setState(s => ({ ...s, [key]: val })); persist({ [key]: val }); }; return ( ); } Object.assign(window, { Nav, Footer, Ph, Tweaks, useTheme });