// AcademiaDental — Reusable UI components const { useState, useEffect, useRef, useMemo, useCallback } = React; // ---------- Icons (inline SVGs) ---------- const Icon = { Home: (p) => (), Book: (p) => (), Chat: (p) => (), User: (p) => (), Gift: (p) => (), Shield: (p) => (), Lock: (p) => (), Check: (p) => (), X: (p) => (), Back: (p) => (), Play: (p) => (), Phone: (p) => (), Laptop: (p) => (), Bell: (p) => (), Clock: (p) => (), Send: (p) => (), Settings: (p) => (), Map: (p) => (), Flag: (p) => (), Trash: (p) => (), Download: (p) => (), Flame: (p) => () }; // ---------- Toast ---------- window.AD_TOAST = (() => { const sub = new Set(); let list = []; function emit() { sub.forEach((f) => f(list.slice())); } function show(msg, ms = 2200) { const id = Math.random().toString(36).slice(2); list.push({ id, msg }); emit(); setTimeout(() => { list = list.filter((t) => t.id !== id); emit(); }, ms); } function subscribe(fn) { sub.add(fn); fn(list.slice()); return () => sub.delete(fn); } return { show, subscribe }; })(); function ToastHost() { const [items, setItems] = useState([]); useEffect(() => window.AD_TOAST.subscribe(setItems), []); if (!items.length) return null; return (
{items.map((t) => (
{t.msg}
))}
); } // ---------- Modal ---------- function Modal({ title, body, onClose, actions }) { useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose && onClose(); }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }, [onClose]); return (
e.stopPropagation()}> {title ?

{title}

: null} {body} {actions ?
{actions}
: null}
); } // ---------- Layout: AppShell (sidebar on desktop, top+bottom on mobile) ---------- function AppShell({ session, route, setRoute, children }) { const S = window.AD_STATE; const streak = S.getStreak(session.email).count || 0; const tabs = [ { id: 'home', label: 'Inicio', icon: Icon.Home }, { id: 'modules', label: 'Módulos', icon: Icon.Book }, { id: 'tutor', label: 'Tutor IA', icon: Icon.Chat }, { id: 'account', label: 'Cuenta', icon: Icon.User } ]; const sideExtra = [ { id: 'minsal', label: 'Guías MINSAL', icon: Icon.Flag }, { id: 'referrals', label: 'Referidos', icon: Icon.Gift }, { id: 'security', label: 'Seguridad', icon: Icon.Shield } ]; return (
{/* Desktop sidebar */} {/* Main area */}
{children} {/* Mobile bottom nav */}
); } // ---------- Mobile top bar ---------- function TopBar({ title, back, right, logo }) { return (
{back ? : (logo ?
AcademiaDental
: (title ?
{title}
:
))} {title && (back || logo) ?
{title}
: null}
{right}
); } // Progress bar function ProgressBar({ value, color }) { return (
); } // Streak weekly strip (sun-mon-tue ...) function StreakWeek({ email }) { const S = window.AD_STATE; const streak = S.getStreak(email); const days = ['L','M','M','J','V','S','D']; const today = new Date(); // Build last 7 days back-to-front const cells = []; for (let i = 6; i >= 0; i--) { const d = new Date(today); d.setDate(today.getDate() - i); const key = S.todayKey(d); const done = !!(streak.daysOfWeek && streak.daysOfWeek[key]); const isToday = i === 0; // Map day index Monday=0 const dayName = days[(d.getDay() + 6) % 7]; cells.push({ key, done, isToday, dayName }); } return (
{cells.map((c, i) => (
{c.done ? : (c.isToday ? '·' : '')}
{c.dayName}
))}
); } Object.assign(window, { Icon, Modal, AppShell, TopBar, ProgressBar, StreakWeek, ToastHost });