From 5e019c41f4c6545d4effd9acab3a03617e1b9996 Mon Sep 17 00:00:00 2001
From: piradata <github@piradata.dev>
Date: Thu, 30 May 2024 02:43:45 -0300
Subject: [PATCH] generate options tags inside select component

---
 src/renderer/src/components/select/select.tsx    | 11 ++++++++---
 .../src/pages/settings/settings-general.tsx      | 16 +++++++++-------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/components/select/select.tsx b/src/renderer/src/components/select/select.tsx
index 20b5a1c0..75b1d793 100644
--- a/src/renderer/src/components/select/select.tsx
+++ b/src/renderer/src/components/select/select.tsx
@@ -9,13 +9,14 @@ export interface SelectProps
   > {
   theme?: NonNullable<RecipeVariants<typeof styles.select>>["theme"];
   label?: string;
+  options?: { key: any; value: any; label: string }[];
 }
 
 export function Select({
   value,
-  theme = "primary",
   label,
-  children,
+  options = [{ key: value, value: value, label: "-" }],
+  theme = "primary",
   onChange,
 }: SelectProps) {
   const [isFocused, setIsFocused] = useState(false);
@@ -38,7 +39,11 @@ export function Select({
           onBlur={() => setIsFocused(false)}
           onChange={onChange}
         >
-          {children}
+          {options.map((option) => (
+            <option key={option.key} value={option.value}>
+              {option.label}
+            </option>
+          ))}
         </select>
       </div>
     </div>
diff --git a/src/renderer/src/pages/settings/settings-general.tsx b/src/renderer/src/pages/settings/settings-general.tsx
index a62bc243..0962dcf8 100644
--- a/src/renderer/src/pages/settings/settings-general.tsx
+++ b/src/renderer/src/pages/settings/settings-general.tsx
@@ -128,13 +128,15 @@ export function SettingsGeneral({
 
       <h3>{t("language")}</h3>
       <>
-        <Select value={form.language} onChange={handleLanguageChange}>
-          {languageOptions.map((language) => (
-            <option key={language.option} value={language.option}>
-              {language.nativeName}
-            </option>
-          ))}
-        </Select>
+        <Select
+          value={form.language}
+          onChange={handleLanguageChange}
+          options={languageOptions.map((language) => ({
+            key: language.option,
+            value: language.option,
+            label: language.nativeName,
+          }))}
+        />
       </>
 
       <h3>{t("notifications")}</h3>