/* Shared components + icons for ShikshaTri Exposed to window for cross-script use. */ // ============ ICONS (inline SVG, all 20x20 stroke) ============ const Icon = ({ d, size = 18, fill = 'none', stroke = 'currentColor', sw = 1.6, ...rest }) => ( ); const IconHome = (p) => ; const IconCube = (p) => } />; const IconBeaker = (p) => } />; const IconBook = (p) => } />; const IconGraduation = (p) => } />; const IconChart = (p) => } />; const IconClipboard = (p) => } />; const IconChat = (p) => ; const IconShield = (p) => } />; const IconUsers = (p) => } />; const IconSettings = (p) => } />; const IconBell = (p) => } />; const IconSearch = (p) => } />; const IconGlobe = (p) => } />; const IconPlay = (p) => ; const IconPause = (p) => ; const IconLayers = (p) => } />; const IconRotate = (p) => } />; const IconZoom = (p) => } />; const IconAward = (p) => } />; const IconFlame = (p) => ; const IconCheck = (p) => ; const IconArrow = (p) => ; const IconMic = (p) => } />; const IconSend = (p) => ; const IconTool = (p) => ; const IconTarget = (p) => } />; const IconClock = (p) => } />; const IconMap = (p) => } />; const IconSparkle = ({ size = 18, ...rest }) => ( ); const IconDownload = (p) => ; const IconGrid = (p) => } />; const IconVideo = (p) => } />; // --- Added icons for expanded modules --- const IconHeadset = (p) => } />; const IconScan = (p) => } />; const IconBoard = (p) => } />; const IconCalendar = (p) => } />; const IconFileText = (p) => } />; const IconBriefcase = (p) => } />; const IconUser = (p) => } />; const IconBookmark = (p) => ; const IconStar = (p) => ; const IconHelp = (p) => } />; const IconPlus = (p) => ; const IconEdit = (p) => } />; const IconTrophy = (p) => } />; const IconEye = (p) => } />; const IconFilter = (p) => ; const IconLock = (p) => } />; const IconLightbulb = (p) => } />; const IconRefresh = (p) => } />; const IconUpload = (p) => ; const IconAlert = (p) => } />; const IconMail = (p) => } />; const IconPhone = (p) => ; const IconThumbsUp = (p) => } />; const IconExternal = (p) => } />; const IconChevronRight = (p) => ; const IconServer = (p) => } />; const IconCompass = (p) => } />; // ============ BRAND LOGO ============ const ShikshaTriLogo = ({ size = 34, mono = false }) => ( ); // ============ NAV DEFINITION ============ const NAV_ITEMS = [ { section: 'Learn' }, { id: 'student', label: 'Dashboard', hi: 'डैशबोर्ड', icon: IconHome, role: 'student' }, { id: 'library', label: 'Trade Library', hi: 'ट्रेड लाइब्रेरी', icon: IconBook, role: 'student' }, { id: 'lesson', label: '3D Lessons', hi: '3D पाठ', icon: IconCube, role: 'student', badgeCount: 4 }, { id: 'animation', label: 'Process Animation', hi: 'प्रक्रिया एनिमेशन', icon: IconVideo, role: 'student' }, { id: 'lab', label: 'Virtual Lab', hi: 'वर्चुअल लैब', icon: IconBeaker, role: 'student' }, { id: 'workshop', label: 'Virtual Workshop', hi: 'वर्चुअल कार्यशाला', icon: IconTool, role: 'student' }, { id: 'arvr', label: 'AR & VR Learning', hi: 'एआर व वीआर', icon: IconHeadset, role: 'student' }, { section: 'Assess & Grow' }, { id: 'assess', label: 'Assessments', hi: 'मूल्यांकन', icon: IconClipboard, role: 'student' }, { id: 'tutor', label: 'AI Tutor', hi: 'एआई ट्यूटर', icon: IconChat, role: 'student' }, { id: 'certificates', label: 'Certificates', hi: 'प्रमाणपत्र', icon: IconAward, role: 'student' }, { id: 'readiness', label: 'Industry Readiness', hi: 'उद्योग तैयारी', icon: IconBriefcase, role: 'student' }, { section: 'Resources' }, { id: 'manual', label: 'Workshop Manual', hi: 'कार्यशाला मैनुअल', icon: IconFileText, role: 'student' }, { id: 'help', label: 'Help & Support', hi: 'सहायता', icon: IconHelp, role: 'student' }, { section: 'Teach' }, { id: 'instructor', label: 'Instructor', hi: 'शिक्षक', icon: IconGraduation, role: 'instructor' }, { id: 'classroom', label: 'Smart Classroom', hi: 'स्मार्ट कक्षा', icon: IconBoard, role: 'instructor' }, { id: 'questionbank', label: 'Question Bank', hi: 'प्रश्न बैंक', icon: IconClipboard, role: 'instructor' }, { section: 'Manage' }, { id: 'admin', label: 'Institute Admin', hi: 'प्रशासन', icon: IconChart, role: 'admin' }, { id: 'reports', label: 'Reports & Analytics', hi: 'रिपोर्ट', icon: IconServer, role: 'admin' }, { section: 'Account' }, { id: 'profile', label: 'My Profile', hi: 'मेरी प्रोफ़ाइल', icon: IconUser, role: 'student' }, { section: 'About' }, { id: 'landing', label: 'Product Page', icon: IconGlobe, role: 'marketing' }, ]; // ============ APP SHELL ============ const AppShell = ({ current, onNavigate, crumbs, actions, children }) => { return (

{children}

); }; const Sidebar = ({ current, onNavigate }) => ( ); const Topbar = ({ crumbs, actions }) => { const [lang, setLang] = React.useState('EN'); const langs = ['EN', 'हिं', 'த', 'తె', 'বাং']; return (

{crumbs.map((c, i) => ( {i > 0 && /} {i === crumbs.length - 1 ? {c} : {c}} ))}

setLang(langs[(langs.indexOf(lang) + 1) % langs.length])}> {lang}

{actions}

); }; // ============ GOVERNMENT CREDIBILITY BAR ============ const GovBar = () => (

); const CredBadge = ({ label, sub }) => (

{label}

{sub}

); // ============ TRADE ICON (procedural mini glyph) ============ const TradeIcon = ({ trade, size = 22 }) => { // Simple glyphs per trade const glyphs = { Electrician: <>, Fitter: <>, Turner: <>, Machinist: <>, Welder: <>, COPA: <>, 'Electronics Mechanic': <>, 'Mechanic Diesel': <>, 'Refrigeration & AC': <>, Wireman: <>, Plumber: <>, ICTSM: <>, 'Instrument Mechanic': <>, Foundryman: <>, 'Tool & Die Maker': <>, Surveyor: <>, Draughtsman: <>, 'Solar Technician': <>, 'Electric Vehicle Technician': <>, Mechatronics: <>, 'CNC Operator': <>, }; const glyph = glyphs[trade] || ; return ( ); }; // ============ TOAST (lightweight, DOM-based) ============ function toast(msg, opts) { opts = opts || {}; let host = document.getElementById('st-toast-host'); if (!host) { host = document.createElement('div'); host.id = 'st-toast-host'; host.style.cssText = 'position:fixed;right:20px;bottom:20px;z-index:2147480000;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none;'; document.body.appendChild(host); } const t = document.createElement('div'); t.style.cssText = 'pointer-events:auto;background:#0b2a5b;color:#fff;font-family:Inter,system-ui,Arial,sans-serif;font-size:13px;font-weight:500;padding:12px 16px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:340px;line-height:1.45;transform:translateY(8px);opacity:0;transition:transform .18s,opacity .18s;border-left:3px solid #e67514;'; t.textContent = msg; host.appendChild(t); requestAnimationFrame(() => { t.style.transform = 'translateY(0)'; t.style.opacity = '1'; }); setTimeout(() => { t.style.opacity = '0'; t.style.transform = 'translateY(8px)'; setTimeout(() => t.remove(), 220); }, opts.duration || 2600); } // ============ MODAL (reusable) ============ const Modal = ({ open, title, subtitle, onClose, children, footer, width = 460 }) => { if (!open) return null; return (

e.stopPropagation()} style={{ width, maxWidth: '94vw', maxHeight: '90vh', overflow: 'auto', background: 'white', borderRadius: 16, boxShadow: '0 30px 80px rgba(0,0,0,0.4)' }}>

{title}

{subtitle &&

{subtitle}

}

{children}

{footer &&

{footer}

}

); }; // ============ FIELD (labelled input for forms) ============ const Field = ({ label, children }) => ( {label} {children} ); const fieldInputStyle = { width: '100%', padding: '10px 12px', border: '1px solid var(--ink-200)', borderRadius: 8, fontSize: 14, fontFamily: 'inherit', outline: 'none', background: 'white', color: 'var(--ink-900)', boxSizing: 'border-box' }; // Expose to window Object.assign(window, { toast, Modal, Field, fieldInputStyle, Icon, IconHome, IconCube, IconBeaker, IconBook, IconGraduation, IconChart, IconClipboard, IconChat, IconShield, IconUsers, IconSettings, IconBell, IconSearch, IconGlobe, IconPlay, IconPause, IconLayers, IconRotate, IconZoom, IconAward, IconFlame, IconCheck, IconArrow, IconMic, IconSend, IconTool, IconTarget, IconClock, IconMap, IconSparkle, IconDownload, IconGrid, IconVideo, IconHeadset, IconScan, IconBoard, IconCalendar, IconFileText, IconBriefcase, IconUser, IconBookmark, IconStar, IconHelp, IconPlus, IconEdit, IconTrophy, IconEye, IconFilter, IconLock, IconLightbulb, IconRefresh, IconUpload, IconAlert, IconMail, IconPhone, IconThumbsUp, IconExternal, IconChevronRight, IconServer, IconCompass, ShikshaTriLogo, AppShell, Sidebar, Topbar, GovBar, CredBadge, TradeIcon, NAV_ITEMS, });