frontend/src/studentportalen/ComponentLibrary.tsx

@@ -2,11 +2,22 @@ import { useState, useEffect } from 'react';
 import Button from '../components/Button/Button';
 import TextInput from '../components/TextInput/TextInput';
 import ListItem from '../components/ListItem/ListItem';
+import Combobox from '../components/Combobox/Combobox';
+
+const peopleOptions = [
+    { value: '1', label: 'Lennart Johansson', subtitle: 'lejo1891' },
+    { value: '2', label: 'Mats Rubarth', subtitle: 'matsrub1891' },
+    { value: '3', label: 'Daniel Tjernström', subtitle: 'datj1891' },
+    { value: '4', label: 'Johan Mjällby', subtitle: 'jomj1891' },
+    { value: '5', label: 'Krister Nordin', subtitle: 'krno1891' },
+    { value: '6', label: 'Kurre Hamrin', subtitle: 'kuha1891' },
+];
 
 export default function ComponentLibrary() {
     const [darkMode, setDarkMode] = useState(() => {
         return document.documentElement.classList.contains('dark');
     });
+    const [selectedPerson, setSelectedPerson] = useState<string>('');
 
     useEffect(() => {
         if (darkMode) {
@@ -161,6 +172,34 @@ export default function ComponentLibrary() {
                     <ListItem title="Per Karlsson" />
                 </div>
             </section>
+
+            <section className="mt-lg">
+                <h2 className="mb-md">Combobox</h2>
+                <div className="flex flex-col gap-md">
+                    <Combobox
+                        options={peopleOptions}
+                        value={selectedPerson}
+                        onChange={setSelectedPerson}
+                        placeholder="Search..."
+                        label="Select person"
+                    />
+                    <p className="body-light-sm text-base-ink-placeholder">
+                        Selected: {selectedPerson ? peopleOptions.find((p) => p.value === selectedPerson)?.label : 'None'}
+                    </p>
+                </div>
+            </section>
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
+            <br />
             <br />
             <br />
             <br />