feat: dark theme export background

src/components/Select.tsx

@@ -4,23 +4,39 @@ import * as RadixSelect from "@radix-ui/react-select";
 import "./Select.scss";
 import { tablerChevronDownIcon, tablerChevronUpIcon } from "./icons";
 
-type SelectItems = Record<string, { path: string | null; label: string }>;
+type SelectItems<T extends string> = Record<T, string>;
 
-export type SelectProps = {
-  items: SelectItems;
-  value: keyof SelectItems;
-  onChange: (value: keyof SelectItems) => void;
+export type SelectProps<T extends string> = {
+  items: SelectItems<T>;
+  value: T;
+  onChange: (value: T) => void;
   placeholder?: string;
   ariaLabel?: string;
 };
 
-const Select = ({
+type ConverterFunction<T> = (
+  items: Record<string, T>,
+  getLabel: (item: T) => string,
+) => SelectItems<string>;
+
+export const convertToSelectItems: ConverterFunction<any> = (
+  items,
+  getLabel,
+) => {
+  const result: SelectItems<string> = {};
+  for (const key in items) {
+    result[key] = getLabel(items[key]);
+  }
+  return result;
+};
+
+const Select = <T extends string>({
   items,
   value,
   onChange,
   placeholder,
   ariaLabel,
-}: SelectProps) => (
+}: SelectProps<T>) => (
   <RadixSelect.Root value={value} onValueChange={onChange}>
     <RadixSelect.Trigger
       className="Select__trigger"
@@ -41,11 +57,13 @@ const Select = ({
       </RadixSelect.ScrollUpButton>
 
       <RadixSelect.Viewport className="Select__viewport">
-        {Object.entries(items).map(([itemValue, itemLabel]) => (
-          <SelectItem value={itemValue} key={itemValue}>
-            {itemLabel.label}
-          </SelectItem>
-        ))}
+        {(Object.entries(items) as [T, string][]).map(
+          ([itemValue, itemLabel]) => (
+            <SelectItem value={itemValue} key={itemValue}>
+              {itemLabel}
+            </SelectItem>
+          ),
+        )}
       </RadixSelect.Viewport>
 
       <RadixSelect.ScrollDownButton className="Select__scroll-button">