replaced radio buttons by selects in SelectFilter (#24)

* replaced radio buttons by selects in SelectFilter

* fix: review

Author: TeddyRoncin

src/components/UI/Input.module.scss

@@ -1,15 +1,14 @@
 @import '@/variables';
 
-
 .inputWrapper {
   display: flex;
   border-radius: 10px;
   border: 3px solid #D3D3D3;
-  background-color: #F0F0F2;
+  background-color: $light-gray;
 
   input {
-    background-color: #F0F0F2;
-    color: #444C5F;
+    background-color: $light-gray;
+    color: $ung-light-grey;
     border-radius: 7px;
     padding: 10px 15px;
     border: none;
@@ -36,7 +35,7 @@
     }
 
     svg {
-      color: #F0F0F2;
+      color: $light-gray;
     }
   }
 }

src/components/UI/Select.module.scss

@@ -0,0 +1,9 @@
+@import '@/variables';
+
+.select {
+  width: 100%;
+  background-color: $light-gray;
+  border: 3px solid #D3D3D3;
+  border-radius: 10px;
+  padding: 0.2rem 0.5rem;
+}

src/components/UI/Select.tsx

@@ -0,0 +1,26 @@
+import styles from './Select.module.scss';
+
+export default function Select<Choices extends string = string>({
+  options,
+  value,
+  onSelect,
+  className = '',
+}: {
+  options: Array<{ id: Choices; name: string }>;
+  value: string;
+  onSelect: (item: Choices) => void;
+  className?: string;
+}) {
+  return (
+    <select
+      value={value}
+      onChange={(event) => onSelect(event.currentTarget.value as Choices)}
+      className={`${styles.select} ${className}`}>
+      {options.map((option) => (
+        <option key={option.id} value={option.id}>
+          {option.name}
+        </option>
+      ))}
+    </select>
+  );
+}

src/components/filteredSearch/FilteredSearch.module.scss

@@ -9,6 +9,6 @@
 
   .filter {
     margin: 2rem 0;
-    overflow-y: scroll;
+    //overflow-y: scroll;
   }
 }

src/components/filteredSearch/InputFilter.module.scss

@@ -9,6 +9,5 @@
   .input {
     display: flex;
     border-radius: 10px;
-    width: max-content;
   }
 }

src/components/filteredSearch/SelectFilter.module.scss

@@ -5,13 +5,4 @@
     color: $ung-light-grey;
     margin-bottom: 0.75rem;
   }
-
-  .option {
-    display: block;
-    line-height: 1.5rem;
-
-    input {
-      margin-right: 0.5rem;
-    }
-  }
 }

src/components/filteredSearch/SelectFilter.tsx

@@ -2,6 +2,7 @@ import styles from './SelectFilter.module.scss';
 import { FC, useEffect, useRef, useState } from 'react';
 import { NotParameteredTranslationKey, useAppTranslation } from '@/lib/i18n';
 import { BaseFilterProps } from '@/components/filteredSearch/FilteredSearch';
+import Select from '@/components/UI/Select';
 
 export function SelectFilter<Choices extends string>({
   onUpdate,
@@ -27,22 +28,17 @@ export function SelectFilter<Choices extends string>({
   return (
     <div className={styles.filter}>
       <h3 className={styles.title}>{t(title)}</h3>
-      <label key={'all'} className={styles.option}>
-        <input type={'radio'} name={title} value={'all'} onChange={() => setValue('all')} checked={value === 'all'} />
-        {t('common:filter.all')}
-      </label>
-      {choices.map((choice) => (
-        <label key={choice} className={styles.option}>
-          <input
-            type={'radio'}
-            name={title}
-            value={choice}
-            onChange={() => setValue(choice)}
-            checked={value === choice}
-          />
-          {humanReadableMapping ? t(humanReadableMapping[choice]) : choice}
-        </label>
-      ))}
+      <Select<Choices | 'all'>
+        options={[
+          { id: 'all', name: t('common:filter.all') },
+          ...choices.map((choice) => ({
+            id: choice,
+            name: humanReadableMapping ? t(humanReadableMapping[choice]) : choice,
+          })),
+        ]}
+        onSelect={setValue}
+        value={value}
+      />
     </div>
   );
 }