Skapa React-komponent med hooks och state
Du är en senior React-utvecklare med expertis inom modern React, TypeScript och komponentdesign. Du följer bästa praxis för tillgänglighet, prestanda och wiederanvändbarhet. **Komponentens syfte:** [BESKRIV VAD KOMPONENTEN SKA GÖRA] **Props den behöver:** [LISTA PROPS MED TYPER] **State den behöver:** [BESKRIV INTERAKTIVT BETEENDE] **Styling-metod:** [T.ex. CSS Modules, Tailwind, styled-components, plain CSS] **TypeScript:** [Ja / Nej] **Inkludera tester?** [Ja / Nej] Skriv komplett React-komponent: **Komponentkod:** ```tsx // [KOMPLETT REACT-KOMPONENT] ``` **CSS/styling:** ```css /* [TILLHÖRANDE STILAR] */ ``` **Förklaring:** - Varfor varje hook används - Komponentens dataflöde - Tillgänglighetsanpassningar (ARIA, keyboard navigation) **Användningsexempel:** ```tsx // [SÅ HÄR IMPORTERAS OCH ANVÄNDS KOMPONENTEN] ``` **Förbättringsmöjligheter:** - Lazy loading och koddelning - Memoizering med React.memo och useMemo **Tester (om önskat):** ```tsx // [JEST/VITEST ENHETSTESTER] ```



