// components.jsx — visual primitives shared across sections. const { useState, useEffect, useRef, useMemo } = React; // ─── Editorial placeholder image ────────────────────────────────────────────── // Soft-toned warm gradient with diagonal stripes + a tiny mono caption. Used in // place of real café photos so the layout is honest about what's missing. function EditorialPlaceholder({ label, hue = 24, sat = 28, dark = false, aspect = "4 / 5", caption, style = {} }) { const bg1 = `oklch(${dark ? 0.32 : 0.78} ${sat / 100 * 0.06} ${hue})`; const bg2 = `oklch(${dark ? 0.22 : 0.88} ${sat / 100 * 0.04} ${hue + 10})`; const stripe = `oklch(${dark ? 0.38 : 0.72} ${sat / 100 * 0.05} ${hue}) `; return (
{/* fine diagonal stripes */}
{/* grain */}
{/* corner caption */} {caption !== false && (
{caption || `IMG · ${label || "photo"}`}
)} {/* center label */} {label && caption !== false && (
{label}
)}
); } // ─── Tag pill ───────────────────────────────────────────────────────────────── function Tag({ children, accent }) { return ( {children} ); } // ─── Star rating ────────────────────────────────────────────────────────────── function Stars({ value = 0, size = 14, gap = 1.5 }) { const full = Math.floor(value); const half = value - full >= 0.5; const stars = []; for (let i = 0; i < 5; i++) { const fill = i < full ? "full" : (i === full && half ? "half" : "empty"); stars.push( ); } return {stars}; } // ─── Logomark ───────────────────────────────────────────────────────────────── function Logo({ dark, size = 44 }) { return ( e.preventDefault()} aria-label="Cash Café" style={{ display: "inline-flex", alignItems: "center", textDecoration: "none", }}> Cash Café ); } // ─── Inline icons (no external lib) ─────────────────────────────────────────── const Icon = { search: (p) => , pin: (p) => , arrow: (p) => , bookmark:(p) => , phone: (p) => , clock: (p) => , play: (p) => , pause: (p) => , next: (p) => , prev: (p) => , close: (p) => , ext: (p) => , globe: (p) => , speaker:(p) => , share: (p) => , heart: (p) => , book: (p) => , }; Object.assign(window, { EditorialPlaceholder, Tag, Stars, Logo, Icon });