// ui.jsx — shared primitives & icons for Kolhida prototype // Apply persisted theme as early as possible (function () { try { const saved = localStorage.getItem('kolhida-theme'); if (saved === 'dark' || saved === 'light') { document.documentElement.setAttribute('data-theme', saved); } } catch (e) {} })(); // ──────────────────────────────────────────────────────────── // Brand wordmark // ──────────────────────────────────────────────────────────── function Wordmark({ size = 18, sub = false }) { return ( Kolhida — Застрахователен Брокер ); } // ──────────────────────────────────────────────────────────── // Icon set — line-based, 24×24 viewBox // ──────────────────────────────────────────────────────────── const I = { back: (p) => ( ), close: (p) => ( ), bell: (p) => ( ), orders: (p) => ( ), plus: (p) => ( ), chevron: (p) => ( ), check: (p) => ( ), shield: (p) => ( ), shieldCheck: (p) => ( ), car: (p) => ( ), doc: (p) => ( ), pin: (p) => ( ), truck: (p) => ( ), building: (p) => ( ), user: (p) => ( ), lock: (p) => ( ), card: (p) => ( ), globe: (p) => ( ), help: (p) => ( ), mail: (p) => ( ), logout: (p) => ( ), arrowRight: (p) => ( ), package: (p) => ( ), spark: (p) => ( ), euro: (p) => ( ), calendar: (p) => ( ), file: (p) => ( ), sticker: (p) => ( ), scan: (p) => ( ), phone: (p) => ( ), chat: (p) => ( ), sun: (p) => ( ), moon: (p) => ( ), home: (p) => ( ), }; // ──────────────────────────────────────────────────────────── // OAuth provider glyphs (original line/silhouette renditions — // not the licensed brand marks). Color the call-out via prop. // ──────────────────────────────────────────────────────────── function OAuthGlyph({ provider }) { if (provider === 'google') { return ( ); } if (provider === 'apple') { return ( ); } if (provider === 'meta') { return ( ); } return null; } // ──────────────────────────────────────────────────────────── // 3D Tile icons (CSS + SVG combo) for the hub // ──────────────────────────────────────────────────────────── function Tile3D({ kind, active }) { // Each variant: a geometric "3D" composition using gradients + soft shadow. const base = { car: { hue: 200, tone: '#00B0F0' }, house: { hue: 28, tone: '#F2B441' }, person:{ hue: 158, tone: '#3DBE8C' }, }[kind]; const lit = active ? '#ffffff' : base.tone; const lit2 = active ? 'rgba(255,255,255,.7)' : '#ffffff'; const shadow = active ? 'rgba(0,0,0,.5)' : 'rgba(10,14,26,.18)'; if (kind === 'car') { return ( {/* roof */} {/* body */} {/* window highlight */} {/* wheels */} {/* underbelly shadow */} ); } if (kind === 'house') { return ( {/* roof */} {/* body */} {/* door */} {/* window */} {/* underbelly shadow */} ); } if (kind === 'person') { return ( {/* shoulders */} {/* head */} {/* hair / cap */} {/* underbelly shadow */} ); } return null; } // ──────────────────────────────────────────────────────────── // Language chip + dropdown (reused on login & top bar) // ──────────────────────────────────────────────────────────── function LangChip({ lang, onChange }) { const [open, setOpen] = React.useState(false); const label = lang === 'bg' ? 'БГ' : 'EN'; return (
{open && ( <>
setOpen(false)}>
)}
); } // ──────────────────────────────────────────────────────────── // Top bar (used inside app shell) // ──────────────────────────────────────────────────────────── function TopBar({ user, onAvatar, onBell, onOrders, elevated, hasNotifs = true, lang, onLang }) { return (
{onLang && }
); } // ──────────────────────────────────────────────────────────── // Bottom navigation bar (with raised center action) // ──────────────────────────────────────────────────────────── function BottomNav({ activeTab, onHome, onCars, onOrders, onBell, hasNotifs = true, showCars = true }) { const tabs = [ { id: 'home', icon: I.home, label: t('navHome'), onClick: onHome }, { id: 'cars', icon: I.car, label: t('navCars'), onClick: onCars }, { id: 'orders', icon: I.orders, label: t('navOrders'), onClick: onOrders }, { id: 'notif', icon: I.bell, label: t('navNotifs'), onClick: onBell, badge: hasNotifs }, ].filter(tab => tab.id !== 'cars' || showCars); return ( ); } // ──────────────────────────────────────────────────────────── // Theme toggle (light / dark) — single tap, no menu // ──────────────────────────────────────────────────────────── function ThemeToggle() { const [dark, setDark] = React.useState(() => document.documentElement.getAttribute('data-theme') === 'dark'); const toggle = () => { const next = dark ? 'light' : 'dark'; const de = document.documentElement; de.classList.add('theme-switching'); de.setAttribute('data-theme', next); try { localStorage.setItem('kolhida-theme', next); } catch (e) {} setDark(!dark); // Force a repaint, then re-enable transitions on the next frame void de.offsetWidth; requestAnimationFrame(() => requestAnimationFrame(() => de.classList.remove('theme-switching'))); }; return ( ); } // ──────────────────────────────────────────────────────────── // Page head (subscreens) // ──────────────────────────────────────────────────────────── function PageHead({ title, onBack, right }) { return (
{title}
{right}
); } // ──────────────────────────────────────────────────────────── // Toast helper // ──────────────────────────────────────────────────────────── function Toast({ msg, show }) { return (
{msg}
); } Object.assign(window, { Wordmark, OAuthGlyph, Tile3D, TopBar, LangChip, PageHead, Toast, I });