// components.jsx — shared primitives const { useState, useEffect, useRef, useCallback, useMemo } = React; // ─── Inline icon system (simple stroke icons, MUI-ish outlined) ───────── const Icon = ({ name, size = 22, stroke = 2, style }) => { const common = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round', style, }; const paths = { home: <>, camera: <>, upload: <>, library: <>, user: <>, settings: <>, close: <>, check: <>, chevRight: <>, chevLeft: <>, chevDown: <>, sparkles: <>, wand: <>, download: <>, share: <>, flash: <>, flip: <>, grid: <>, image: <>, palette: <>, scan: <>, zap: <>, phone: <>, cloud: <>, mail: <>, help: <>, shield: <>, bell: <>, heart: <>, arrowRight:<>, arrowLeft: <>, plus: <>, dots: <>, refresh: <>, heartFill: <>, link: <>, crop: <>, sun: <>, eye: <>, photo: <>, }; return {paths[name] || null}; }; // ─── StatusBar (fake phone chrome) ─────────────────────────────────── const StatusBar = ({ dark = false }) => (
9:41
{/* signal */} {/* wifi */} {/* battery */}
); // ─── AppBar ────────────────────────────────────────────────────── const AppBar = ({ title, onBack, right, dark = false }) => (
{onBack ? ( ) : (
O
{title ?? 'Restore Old Photos'}
)} {title && onBack ? (
{title}
) : null} {right ??
}
); // ─── TabBar ────────────────────────────────────────────────────── const TabBar = ({ current, go }) => { const tabs = [ { id: 'home', label: 'Home', icon: 'home' }, { id: 'gallery', label: 'Library', icon: 'library' }, { id: 'capture', label: 'Restore', icon: 'camera', primary: true }, { id: 'account', label: 'Account', icon: 'user' }, ]; return ( ); }; // ─── Before/After components ───────────────────────────────────── const CompareSlider = ({ before, after }) => { const ref = useRef(null); const [pos, setPos] = useState(50); const dragging = useRef(false); const handleMove = (clientX) => { const el = ref.current; if (!el) return; const rect = el.getBoundingClientRect(); const pct = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100)); setPos(pct); }; const start = (e) => { dragging.current = true; const x = e.touches ? e.touches[0].clientX : e.clientX; handleMove(x); }; const move = (e) => { if (!dragging.current) return; const x = e.touches ? e.touches[0].clientX : e.clientX; handleMove(x); }; const end = () => { dragging.current = false; }; useEffect(() => { window.addEventListener('mousemove', move); window.addEventListener('mouseup', end); window.addEventListener('touchmove', move, { passive: true }); window.addEventListener('touchend', end); return () => { window.removeEventListener('mousemove', move); window.removeEventListener('mouseup', end); window.removeEventListener('touchmove', move); window.removeEventListener('touchend', end); }; }, []); return (
Before
After
Before After
); }; const CompareSideBySide = ({ before, after }) => (
Before Before
After After
); const CompareTapReveal = ({ before, after }) => { const [pressed, setPressed] = useState(false); const on = () => setPressed(true); const off = () => setPressed(false); return (
After Before {pressed ? 'Before' : 'After'} Press and hold to see original
); }; Object.assign(window, { Icon, StatusBar, AppBar, TabBar, CompareSlider, CompareSideBySide, CompareTapReveal, });