generate options tags inside select component

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>

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>