feat(preferences): Defaults segment

feat: Dropdown component

app/assets/javascripts/components/Dropdown.tsx

@@ -0,0 +1,45 @@
+import { Listbox, ListboxOption } from '@reach/listbox';
+import VisuallyHidden from '@reach/visually-hidden';
+import { FunctionComponent } from 'preact';
+import { IconType } from './Icon';
+import '@reach/listbox/styles.css';
+import { useState } from 'preact/hooks';
+
+export type DropdownItem = {
+  icon?: IconType;
+  label: string;
+  value: string;
+};
+
+type Props = {
+  id: string;
+  srLabel: string;
+  items: DropdownItem[];
+  defaultValue: string;
+};
+
+export const Dropdown: FunctionComponent<Props> = ({
+  id,
+  srLabel,
+  items,
+  defaultValue,
+}) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const labelId = `${id}-label`;
+
+  return (
+    <>
+      <VisuallyHidden id={labelId}>{srLabel}</VisuallyHidden>
+      <Listbox
+        value={value}
+        onChange={(value) => setValue(value)}
+        aria-labelledby={labelId}
+      >
+        {items.map((item) => (
+          <ListboxOption value={item.value}>{item.label}</ListboxOption>
+        ))}
+      </Listbox>
+    </>
+  );
+};