Bilden kunde inte laddas.
({src})
);
}
return (
{p.n}
{p.title}
{p.symptom && (
)}
{p.explanation && (
Förklaring
{p.explanation}
)}
{p.example && (
Exempel
{p.example.map((line, j) => (
(borde vara $1)')
.replace(/← FEL/g, '
← FEL')
}}/>
))}
)}
{p.info && (
)}
{p.action && (
)}
{p.solution && (
Lösning
$1')
}}/>
{p.solutionBullets && (
{p.solutionBullets.map((b,j)=>(
-
•
$1')}}/>
))}
)}
)}
{p.solutionSteps && (
Lösning
{p.solutionSteps.map((s,j)=>- {s}
)}
)}
{p.test && (
)}
))}
{/* Quick troubleshooting */}
{data.quickTroubleshooting.heading}
{data.quickTroubleshooting.items.map((it,i)=>(
{it.problem}
{it.solution}
))}
);
// ─── FAQ section ───────────────────────────────────────────────────
const FaqBody = ({ data }) => (
{data.items.map((q,i)=>)}
);
// ─── More info section ─────────────────────────────────────────────
const MoreBody = ({ data }) => (
{data.expandables.map((e,i)=>(
))}
);
const Expandable = ({ title, content }) => {
const [open, setOpen] = React.useState(false);
return (
{open && (
{content.warning && (
)}
{content.body &&
{content.body}
}
{content.bullets && (
{content.bullets.map((b,i)=>- {b}
)}
)}
{content.rule && (
)}
{content.example && (
{content.example.heading}
{content.example.rows.map((r,i)=>(
{r.label}
{r.value}
))}
)}
{content.codeBlock && (
{content.codeBlock}
)}
)}
);
};
// ─── Lightbox ──────────────────────────────────────────────────────
const Lightbox = ({ src, alt, onClose }) => {
React.useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, []);
return (
e.stopPropagation()}/>
);
};
// ─── Main app ──────────────────────────────────────────────────────
const SECTION_RENDERERS = {
quickstart: QuickstartBody,
commands: CommandsBody,
'flow-examples': FlowExamplesBody,
'multi-battery': MultiBatteryBody,
'peak-shaving': PeakShavingBody,
troubleshooting: TroubleshootingBody,
faq: FaqBody,
more: MoreBody,
};
function HelpApp(){
const [content, setContent] = React.useState(null);
const [open, setOpen] = React.useState({});
const [lightbox, setLightbox] = React.useState(null);
const [activeId, setActiveId] = React.useState('quickstart');
React.useEffect(() => {
fetch('help-content.json')
.then(r => r.json())
.then(d => {
setContent(d);
// Initialise open state from defaultOpen
const o = {};
for (const k of Object.keys(d.sections)){
o[k] = !!d.sections[k].defaultOpen;
}
setOpen(o);
})
.catch(e => console.error('Failed to load help content', e));
}, []);
// Scroll-spy
React.useEffect(() => {
if (!content) return;
const onScroll = () => {
const fromTop = 130;
let cur = activeId;
for (const id of Object.keys(content.sections)){
const el = document.getElementById(id);
if (!el) continue;
const r = el.getBoundingClientRect();
if (r.top < fromTop) cur = id;
}
if (cur !== activeId) setActiveId(cur);
};
window.addEventListener('scroll', onScroll, {passive:true});
return () => window.removeEventListener('scroll', onScroll);
}, [content, activeId]);
if (!content){
return (
);
}
const toggle = (id) => setOpen(o => ({...o, [id]: !o[id]}));
const openOnly = (id) => {
setOpen(o => ({...o, [id]: true}));
setTimeout(() => {
const el = document.getElementById(id);
if (el) el.scrollIntoView({behavior:'smooth', block:'start'});
}, 30);
};
return (
{content.meta.title}
{content.meta.subtitle}
{content.meta.intro.heading}
{content.meta.intro.body}
{content.sectionNav.map(navItem => {
const data = content.sections[navItem.id];
if (!data) return null;
const Body = SECTION_RENDERERS[navItem.id];
return (
toggle(navItem.id)}>
{Body && setLightbox({src,alt})}/>}
);
})}
Snabblänkar
{content.quickLinks.map((ql, i) => (
{ql.label}
))}
{lightbox &&
setLightbox(null)}/>}
);
}
ReactDOM.createRoot(document.getElementById('root')).render(
);