diff --git a/src/components/ItemSelection/ItemSelection.tsx b/src/components/ItemSelection/ItemSelection.tsx new file mode 100644 index 0000000..9d17591 --- /dev/null +++ b/src/components/ItemSelection/ItemSelection.tsx @@ -0,0 +1,50 @@ +import { useMemo, useState } from 'react' +import { Tag } from '@statisticsnorway/ssb-component-library' +import styles from './itemSelection.module.scss' + +export interface Item { + id: number + text: string +} + +interface ItemSelectionProps { + header: string + items: Item[] + onSelectionChange: (selectedItems: Item[]) => void +} +function ItemSelection({ header, items, onSelectionChange }: ItemSelectionProps) { + const [selectedItems, setSelectedItems] = useState([]) + + const selectedItemIds = useMemo(() => selectedItems.map((item) => item.id), [selectedItems]) + + const selectItem = (selectedItem: Item) => { + const newSelectedItems = selectedItemIds.includes(selectedItem.id) + ? selectedItems.filter((item) => item.id !== selectedItem.id) + : [...selectedItems, selectedItem] + + setSelectedItems(newSelectedItems) + onSelectionChange(newSelectedItems) + } + + return ( +
+
{header}
+
+ {items.map(({ id, text }) => ( + { + selectItem({ id, text }) + event.preventDefault() + }} + className={selectedItemIds.includes(id) ? styles.selectedItem : ''} + > + {text} + + ))} +
+
+ ) +} + +export default ItemSelection diff --git a/src/components/ItemSelection/itemSelection.module.scss b/src/components/ItemSelection/itemSelection.module.scss new file mode 100644 index 0000000..f3be024 --- /dev/null +++ b/src/components/ItemSelection/itemSelection.module.scss @@ -0,0 +1,24 @@ +.rootComponent { + display: flex; + flex-direction: column; + gap: 2.5rem; + font-family: 'Roboto', sans-serif; + font-strect: normal; +} + +.header { + font-size: 1.5rem; + font-weight: bold; + margin-bottom: 8px; +} + +.itemSelection { + display: flex; + flex-flow: row wrap; + justify-content: flex-start; + gap: 1.3rem; +} +.selectedItem { + background-color: #00824d; + color: white; +}