frontend/src/Studentportalen.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter, Route, Routes } from "react-router";
 import Home from "./studentportalen/Home.tsx";
+import ComponentLibrary from "./studentportalen/ComponentLibrary.tsx";
 import Layout from "./studentportalen/Layout.tsx";
 
 export default function Studentportalen() {
@@ -9,6 +10,7 @@ export default function Studentportalen() {
         <Routes>
           <Route element={<Layout />}>
             <Route index element={<Home />} />
+            <Route path="components" element={<ComponentLibrary />} />
           </Route>
         </Routes>
       </BrowserRouter>

frontend/src/studentportalen/ComponentLibrary.tsx

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import Button from '../components/Button/Button';
+
+export default function ComponentLibrary() {
+    const [darkMode, setDarkMode] = useState(() => {
+        return document.documentElement.classList.contains('dark');
+    });
+
+    useEffect(() => {
+        if (darkMode) {
+            document.documentElement.classList.add('dark');
+        } else {
+            document.documentElement.classList.remove('dark');
+        }
+    }, [darkMode]);
+
+    return (
+        <>
+            <h1>Component Library</h1>
+
+            <section className="mt-lg">
+                <h2 className="mb-md">Dark Mode</h2>
+                <Button variant="primary" onClick={() => setDarkMode(!darkMode)}>
+                    {darkMode ? 'Light Mode' : 'Dark Mode'}
+                </Button>
+            </section>
+
+            <section className="mt-lg">
+                <h2 className="mb-md">Button Variants</h2>
+                <div className="flex flex-wrap gap-md">
+                    <Button variant="primary">Primary</Button>
+                    <Button variant="secondary">Secondary</Button>
+                    <Button variant="red">Red</Button>
+                    <Button variant="green">Green</Button>
+                </div>
+            </section>
+
+            <section className="mt-lg">
+                <h2 className="mb-md">Button Sizes</h2>
+                <div className="flex flex-wrap items-center gap-md">
+                    <Button size="sm">Small</Button>
+                    <Button size="md">Medium</Button>
+                    <Button size="lg">Large</Button>
+                </div>
+            </section>
+        </>
+    );
+}