// ============================================================================ // Chrome — Sidebar, Topbar, Logo, ícones, util components // ============================================================================ const { useState, useMemo, useEffect, useRef } = React; // ---- Logo Ampexx (símbolo original: sol estilizado em traço + wordmark) ---- function AmpexxMark({ size = 28, color = 'var(--ink)', accent = 'var(--amber)' }) { // Símbolo: anel solar com raio sólido (referência ao "A" e à energia radiante) return ( ); } function AmpexxLogo({ small = false }) { return (
ampexx.
{!small &&
Energia renovável
}
); } // ---- Ícones (traços simples, lineares — sem emoji) ---- const Icon = { home: (p) => , book: (p) => , doc: (p) => , path: (p) => , pill: (p) => , tool: (p) => , tag: (p) => , building:(p) => , search: (p) => , bell: (p) => , bookmark:(p) => , bookmarkF:(p) => , arrow: (p) => , play: (p) => , check: (p) => , dot: (p) => , filter: (p) => , agenda: (p) => , shield: (p) => , star: (p) => , }; // ============================================================================ // SIDEBAR // ============================================================================ function Sidebar({ route, setRoute }) { const items = [ { id: 'home', label: 'Início', icon: 'home' }, { id: 'playbooks', label: 'Playbooks', icon: 'book' }, { id: 'manuais', label: 'Manuais', icon: 'doc' }, { id: 'trilhas', label: 'Trilhas', icon: 'path' }, { id: 'pilulas', label: 'Pílulas', icon: 'pill' }, { id: 'ferramentas', label: 'Ferramentas', icon: 'tool' }, { id: 'modelos', label: 'Modelos', icon: 'tag' }, ]; const secondary = [ { id: 'politicas', label: 'Políticas internas', icon: 'shield' }, { id: 'favoritos', label: 'Meus favoritos', icon: 'bookmark' }, { id: 'agenda', label: 'Agenda de aulas', icon: 'agenda' }, ]; return ( ); } function NavGroupTitle({ children, style }) { return
{children}
; } function NavItem({ active, onClick, icon, label }) { const IconC = Icon[icon]; return ( ); } // ============================================================================ // TOPBAR // ============================================================================ function Topbar({ route, setRoute, search, setSearch }) { const tabs = [ { id: 'home', label: 'Início' }, { id: 'playbooks', label: 'Playbooks' }, { id: 'manuais', label: 'Manuais' }, { id: 'trilhas', label: 'Trilhas' }, { id: 'pilulas', label: 'Pílulas' }, { id: 'ferramentas', label: 'Ferramentas' }, { id: 'modelos', label: 'Modelos' }, ]; return (
setSearch(e.target.value)} placeholder="Buscar playbook, manual, ferramenta ou trilha…" style={{ flex: 1, border: 'none', outline: 'none', background: 'transparent', fontSize: 13.5, color: 'var(--ink)' }} /> ⌘K
Sincronizado · há 12 min
AC
{tabs.map(t => ( ))}
); } function tabIcon(id){ return { home: 'home', playbooks: 'book', manuais: 'doc', trilhas: 'path', pilulas: 'pill', ferramentas: 'tool', modelos: 'tag' }[id] || 'book'; } // ============================================================================ // Pill / Section title / etc. // ============================================================================ function Pill({ children, tone = 'neutral', dark = false, style = {} }) { const tones = { neutral: { bg: 'var(--bg-2)', fg: 'var(--ink-2)', bd: 'var(--line)' }, leaf: { bg: 'var(--leaf-soft)', fg: '#1F4F37', bd: 'rgba(47,107,79,.18)' }, amber: { bg: 'var(--amber-soft)', fg: '#8A560A', bd: 'rgba(232,155,44,.25)' }, rust: { bg: 'var(--rust-soft)', fg: '#7B341A', bd: 'rgba(184,83,51,.2)' }, navy: { bg: 'rgba(14,31,56,.08)', fg: 'var(--navy)', bd: 'rgba(14,31,56,.18)' }, plum: { bg: 'var(--plum-soft)', fg: '#4D2A4A', bd: 'rgba(107,58,102,.22)' }, dark: { bg: 'rgba(255,255,255,.1)', fg: '#fff', bd: 'rgba(255,255,255,.18)' }, }; const t = tones[tone] || tones.neutral; return ( {children} ); } function SectionHead({ eyebrow, title, action, right }) { return (
{eyebrow &&
{eyebrow}
}

{title}

{right} {action && }
); } // Pequena escala de progresso visual function Progress({ value, color = 'var(--amber)' }) { return (
); } // Card padrão (paper) function Card({ children, style = {}, hoverable = false, onClick }) { const [hover, setHover] = useState(false); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 16, transition: 'transform .15s, box-shadow .15s, border-color .15s', transform: hoverable && hover ? 'translateY(-2px)' : 'none', boxShadow: hoverable && hover ? '0 12px 30px -16px rgba(14,31,56,.18)' : 'none', borderColor: hoverable && hover ? 'var(--line-2)' : 'var(--line)', cursor: hoverable ? 'pointer' : 'default', ...style }}> {children}
); } Object.assign(window, { Icon, Sidebar, Topbar, Pill, SectionHead, Progress, Card, AmpexxMark, AmpexxLogo });