DMC/studentportalen
1
1
Fork 0
Code Issues 24 Pull Requests 3 Actions Projects 1 Wiki Activity

List components #31

Open
stne3960 wants to merge 57 commits from list_item into main
pull from: list_item
merge into: DMC:main
Conversation 10 Commits 57 Files Changed 30 +39
1 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit fed638772e - Show all commits

39
frontend/src/studentportalen/ComponentLibrary.tsx
View File

@ -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 />