// Paste or type your code here…import React, { useState } from 'react'; import { RefreshCcw, Heart, PhoneCall, Wind, Activity, User, Baby, Zap, Ban, RotateCw, AlertTriangle, Shield, ThermometerSnowflake, Flame, Brain, Droplet, Soup, Stethoscope, Syringe, Clipboard } from 'lucide-react'; const App = () => { const [isFlipped, setIsFlipped] = useState(false); const [currentStep, setCurrentStep] = useState(0); const [mode, setMode] = useState('skadested'); const content = { skadested: [ { title: "Opptreden på skadested", question: "Hva er de tre hovedstegene når du ankommer et skadested?", answer: "1. Sikre skadestedet. 2. Skaffe oversikt over skadde. 3. Gi livreddende førstehjelp og varsle 113.", icon: }, { title: "Sikre skadested", question: "Hvordan sikrer du et trafikkulykkested?", answer: "Sett på nødlys, ta på refleksvest, plasser ut varseltrekant (150-250m unna) og sikre at biler ikke triller.", icon: } ], voksen: [ { title: "Hjertestans Voksen", question: "Hva er rekkefølgen for HLR på voksne?", answer: "30 kompresjoner først, deretter 2 innblåsinger. Ingen startblåsinger.", icon: } ], barn: [ { title: "Hjertestans Barn", question: "Hva er rekkefølgen for HLR på barn?", answer: "Start med 5 innblåsinger. Deretter 30 kompresjoner og 2 innblåsinger.", icon: } ], aed: [ { title: "Hjertestarter", question: "Hva er viktigste regel ved bruk av AED?", answer: "Slå den på med en gang og følg stemmen. Ikke rør pasienten under analyse eller støt.", icon: } ], forgiftning: [ { title: "Etsende kjemikalier", question: "Hva gjør du hvis noen har drukket etsende væske (f.eks. avløpsåpner)?", answer: "IKKE fremkall brekninger. Skyll munnen og gi litt vann/melk å drikke. Ring 113 eller Giftinformasjonen (22 59 13 00).", icon: }, { title: "Medisiner", question: "Hva gjør du ved mistanke om overdose av tabletter?", answer: "Finn ut hva og hvor mye som er tatt. Ring 113. Ta med emballasjen til sykehuset.", icon: }, { title: "Hoggormbitt", question: "Hvordan behandles hoggormbitt?", answer: "Hold bittstedet i ro og lavest mulig. Pasienten skal ligge stille. Ring 113 hvis barn, eldre eller ved alvorlig reaksjon.", icon: }, { title: "Sopp/Bær", question: "Hva gjør du ved inntak av giftig sopp?", answer: "Kontakt Giftinformasjonen. Ta vare på rester eller bilde av soppen for identifisering.", icon: }, { title: "Gass/Røyk", question: "Hva er første bud ved kullosforgiftning eller røykinntak?", answer: "Få pasienten ut i frisk luft umiddelbart, men uten å utsette deg selv for fare.", icon: } ], sar_og_brudd: [ { title: "Store blødninger", question: "Hvordan stanser du en kraftig blødning?", answer: "Direkte trykk mot såret. Hev skadestedet hvis mulig. Legg trykkbandasje.", icon: }, { title: "Brudd", question: "Hvordan håndterer du et mistenkt benbrudd?", answer: "Støtt opp og stabiliser bruddet i den stillingen det ligger. Ikke forsøk å rette det ut.", icon: } ], medisinske: [ { title: "Epilepsi", question: "Hva gjør du under et pågående krampeanfall?", answer: "Sikre hodet mot slag. Ikke putt noe i munnen. Ta tiden på anfallet. Ring 113 hvis over 5 min.", icon: }, { title: "Diabetes (Lavt blodsukker)", question: "Hva gir du en våken person med føling?", answer: "Raske karbohydrater: Juice, sukkerholdig brus, honning eller melk.", icon: }, { title: "Allergisk sjokk (Anafylaksi)", question: "Hva er viktigste medisin ved alvorlig allergi?", answer: "Adrenalinpenn (EpiPen). Sett den i utsiden av låret og ring 113 med en gang.", icon: }, { title: "Hjerteinfarkt", question: "Hva er typiske symptomer?", answer: "Smerter/press i brystet, utstråling til arm/kjeve, tung pust og kaldsvette.", icon: }, { title: "Hjerneslag (PRATE)", question: "Hva står PRATE-testen for?", answer: "P-Prate (tydelig?), R-Reise armene, A-Ansikt (skjevt?), T-Tid (Ring 113 straks), E-Eksperthjelp.", icon: } ], miljø: [ { title: "Brannskader", question: "Hva er 20/20-regelen for brannskader?", answer: "Skyll med 20 graders vann i 20 minutter. (Lunkent vann, ikke iskaldt).", icon: }, { title: "Nedkjøling (Hypotermi)", question: "Hvordan varmer du opp en person med alvorlig nedkjøling?", answer: "Skift til tørre klær, pakk inn i tepper/folie. Unngå brå bevegelser og ikke gni huden.", icon: } ] }; const flashcards = content[mode]; const handleNext = () => { setIsFlipped(false); setTimeout(() => setCurrentStep((prev) => (prev + 1) % flashcards.length), 150); }; const handlePrev = () => { setIsFlipped(false); setTimeout(() => setCurrentStep((prev) => (prev - 1 + flashcards.length) % flashcards.length), 150); }; const toggleMode = (newMode) => { setMode(newMode); setCurrentStep(0); setIsFlipped(false); }; const getModeLabel = (m) => { const labels = { skadested: "Skadested", voksen: "HLR Voksen", barn: "HLR Barn", aed: "AED", forgiftning: "Forgiftning", sar_og_brudd: "Sår/Brudd", medisinske: "Sykdom (Stroke/Hjerte)", miljø: "Brann/Kulde" }; return labels[m]; }; return (

Førstehjelp Pro

Velg tema for å drille kunnskapene

{/* Scrollable Category Menu */}

{Object.keys(content).map((m) => ( toggleMode(m)} className={`flex items-center gap-2 py-2 px-4 rounded-full text-sm font-medium transition-all border shadow-sm ${ mode === m ? `bg-slate-800 text-white border-slate-800 scale-105` : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50' }`} > {getModeLabel(m)} ))}

{/* Flashcard Container */}

setIsFlipped(!isFlipped)} >

{/* Front of Card */}

{flashcards[currentStep].icon}

Spørsmål

{flashcards[currentStep].question}

Klikk for å se svar

{/* Back of Card */}

Løsning / Tiltak

{flashcards[currentStep].answer}

Klikk for å gå tilbake

{/* Navigation */}

{ e.stopPropagation(); handlePrev(); }} className="p-4 rounded-2xl bg-white shadow-md hover:bg-slate-100 transition-all active:scale-95" >

{currentStep + 1} / {flashcards.length}

{flashcards[currentStep].title}

{ e.stopPropagation(); handleNext(); }} className="p-4 rounded-2xl bg-white shadow-md hover:bg-slate-100 transition-all active:scale-95" >

{/* Emergency Call Box */}

Nødnummer 113

Alltid ring ved alvorlig skade!