List components #31

Merged
stne3960 merged 68 commits from list_item into main 2025-12-18 12:41:13 +01:00
Showing only changes of commit 2f95516606 - Show all commits

View File

@ -1,6 +1,7 @@
import { useState, useEffect } from 'react'; import { useState, useEffect } from 'react';
import Button from '../components/Button/Button'; import Button from '../components/Button/Button';
import TextInput from '../components/TextInput/TextInput'; import TextInput from '../components/TextInput/TextInput';
import ListItem from '../components/ListItem/ListItem';
export default function ComponentLibrary() { export default function ComponentLibrary() {
const [darkMode, setDarkMode] = useState(() => { const [darkMode, setDarkMode] = useState(() => {
@ -141,6 +142,25 @@ export default function ComponentLibrary() {
<TextInput label="Username" placeholder="Choose a username" error message="Must be at least 3 characters" /> <TextInput label="Username" placeholder="Choose a username" error message="Must be at least 3 characters" />
</div> </div>
</section> </section>
<section className="mt-lg">
<h2 className="mb-md">List Item</h2>
<div className="max-w-96 border border-base-ink-soft rounded-(--border-radius-md) overflow-hidden">
<ListItem title="Lennart Johansson" subtitle="lejo1891" />
<ListItem title="Mats Rubarth" subtitle="matsrub1891" />
<ListItem title="Daniel Tjernström" subtitle="datj1891" selected />
<ListItem title="Johan Mjällby" subtitle="jomj1891" />
</div>
</section>
<section className="mt-lg">
<h2 className="mb-md">List Item - Title Only</h2>
<div className="max-w-96 border border-base-ink-soft rounded-(--border-radius-md) overflow-hidden">
<ListItem title="Krister Nordin" />
<ListItem title="Kurre Hamrin" selected />
<ListItem title="Per Karlsson" />
</div>
</section>
<br /> <br />
<br /> <br />
<br /> <br />