// ui.jsx — Shared UI primitives const { useState, useEffect, useRef } = React; // ── Date utilities ──────────────────────────────────────────────────────────── const formatDateDe = (iso) => { if (!iso) return ''; const s = String(iso).slice(0, 10); const m = s.match(/^(\d{4})-(\d{2})-(\d{2})$/); return m ? `${m[3]}.${m[2]}.${m[1]}` : s; }; // ── Icons ───────────────────────────────────────────────────────────────────── const Icon = ({ name, size = 16, color = 'currentColor' }) => { const icons = { home: , search: <>, plus: , edit: , trash: <>, book: <>, flash: , calendar: <>, tag: , link: <>, chevronDown: , chevronRight: , eye: <>, eyeOff: <>, moon: , sun: <>, logout: <>, x: , check: , arrowLeft: , save: , grid: <>, list: , lock: <>, user: <>, zap: , info: <>, upload: <>, columns: <>, sliders: <>, bell: <>, pin: <>, bellOff: <>, mail: <>, }; return ( {icons[name] || null} ); }; // ── Button ──────────────────────────────────────────────────────────────────── const Btn = ({ children, variant = 'primary', size = 'md', onClick, disabled, icon, style = {} }) => { const base = { display: 'inline-flex', alignItems: 'center', gap: 6, border: 'none', cursor: disabled ? 'not-allowed' : 'pointer', fontFamily: 'var(--font-sans)', fontWeight: 500, borderRadius: 'var(--radius)', transition: 'all 0.15s ease', opacity: disabled ? 0.5 : 1, whiteSpace: 'nowrap', ...style }; const sizes = { sm: { padding: '5px 10px', fontSize: 12 }, md: { padding: '8px 14px', fontSize: 13 }, lg: { padding: '11px 20px', fontSize: 14 }, }; const variants = { primary: { background: 'var(--accent)', color: '#fff' }, secondary: { background: 'var(--surface-2)', color: 'var(--text)', border: '1px solid var(--border)' }, ghost: { background: 'transparent', color: 'var(--text-muted)' }, danger: { background: 'rgba(248,113,113,0.15)', color: '#f87171', border: '1px solid rgba(248,113,113,0.3)' }, }; const [hover, setHover] = useState(false); const hoverStyles = hover && !disabled ? { primary: { filter: 'brightness(1.1)', transform: 'translateY(-1px)' }, secondary: { background: 'var(--surface-hover)', transform: 'translateY(-1px)' }, ghost: { background: 'var(--surface-2)', color: 'var(--text)' }, danger: { background: 'rgba(248,113,113,0.25)' }, }[variant] : {}; return ( ); }; // ── Badge / Tag ─────────────────────────────────────────────────────────────── const TagBadge = ({ label, color }) => ( {label} ); const TypeBadge = ({ type }) => { const map = { exam: { label: 'Klassenarbeit', color: '#f87171' }, task: { label: 'Aufgabe', color: '#60a5fa' }, project: { label: 'Projekt', color: '#a78bfa' }, presentation: { label: 'Präsentation', color: '#34d399' }, }; const t = map[type] || { label: type, color: '#9b5cf6' }; return ; }; // ── Progress Bar ────────────────────────────────────────────────────────────── const ProgressBar = ({ value, color, height = 4, animate = true }) => { const [width, setWidth] = useState(0); useEffect(() => { if (animate) { const t = setTimeout(() => setWidth(value), 100); return () => clearTimeout(t); } else { setWidth(value); } }, [value, animate]); return (
); }; // ── Avatar ──────────────────────────────────────────────────────────────────── const Avatar = ({ initials, size = 32 }) => (
{initials}
); // ── Modal ───────────────────────────────────────────────────────────────────── const Modal = ({ open, onClose, title, children, width = 480 }) => { useEffect(() => { const handler = (e) => e.key === 'Escape' && onClose(); if (open) document.addEventListener('keydown', handler); return () => document.removeEventListener('keydown', handler); }, [open, onClose]); if (!open) return null; return (
e.stopPropagation()}>
{title}
{children}
); }; // ── Input ───────────────────────────────────────────────────────────────────── const Input = ({ value, onChange, placeholder, type = 'text', icon, style = {} }) => { const [focus, setFocus] = useState(false); return (
{icon && (
)} setFocus(true)} onBlur={() => setFocus(false)} style={{ width: '100%', boxSizing: 'border-box', padding: icon ? '8px 12px 8px 34px' : '8px 12px', background: 'var(--surface-2)', border: `1px solid ${focus ? 'var(--accent)' : 'var(--border)'}`, borderRadius: 'var(--radius)', color: 'var(--text)', fontFamily: 'var(--font-sans)', fontSize: 13, outline: 'none', transition: 'border-color 0.15s', boxShadow: focus ? '0 0 0 3px var(--accent-dim)' : 'none', }} />
); }; // ── Empty State ─────────────────────────────────────────────────────────────── const EmptyState = ({ icon = 'book', title, subtitle, action }) => (
{title}
{subtitle &&
{subtitle}
} {action}
); // ── Breadcrumb ──────────────────────────────────────────────────────────────── const Breadcrumb = ({ parts }) => (
~ {parts.map((p, i) => ( {i > 0 && /} {p} ))} ▋
); // ── Toast ───────────────────────────────────────────────────────────────────── // Globaler Subscriber-Mechanismus: window.toast(message, type) pushed eine Toast, // ToastContainer (in App gerendert) abonniert die Updates. const __toastListeners = new Set(); let __toastSeq = 0; window.toast = (message, type = 'info') => { const t = { id: ++__toastSeq, message, type }; __toastListeners.forEach(l => l(t)); }; const ToastContainer = () => { const [toasts, setToasts] = useState([]); useEffect(() => { const listener = (t) => { setToasts(prev => [...prev, t]); setTimeout(() => setToasts(prev => prev.filter(x => x.id !== t.id)), 3500); }; __toastListeners.add(listener); return () => { __toastListeners.delete(listener); }; }, []); const colorFor = (type) => ({ success: { bg: 'rgba(74,222,128,0.12)', border: 'rgba(74,222,128,0.4)', fg: '#4ade80' }, error: { bg: 'rgba(248,113,113,0.12)', border: 'rgba(248,113,113,0.4)', fg: '#f87171' }, info: { bg: 'var(--accent-dim)', border: 'var(--accent)', fg: 'var(--accent)' }, }[type] || { bg: 'var(--surface)', border: 'var(--border)', fg: 'var(--text)' }); return (
{toasts.map(t => { const c = colorFor(t.type); return (
{t.message}
); })}
); }; Object.assign(window, { Icon, Btn, TagBadge, TypeBadge, ProgressBar, Avatar, Modal, Input, EmptyState, Breadcrumb, ToastContainer, formatDateDe });