Implement ItemSelection component

This is useful for selecting multiple items from a list.
The component isn't in use right now, but it will be later
when we add support for selecting 'features' from the create
team page.

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<Item[]>([])
+
+    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 (
+        <div className={styles.rootComponent}>
+            <div className={styles.header}>{header}</div>
+            <div className={styles.itemSelection}>
+                {items.map(({ id, text }) => (
+                    <Tag
+                        key={id}
+                        onClick={(event: Event) => {
+                            selectItem({ id, text })
+                            event.preventDefault()
+                        }}
+                        className={selectedItemIds.includes(id) ? styles.selectedItem : ''}
+                    >
+                        {text}
+                    </Tag>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default ItemSelection

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;
+}