Implement new Santiago region (WIP)

1 files changed, 22 insertions, 0 deletions

diff --git a/src/frontend/app/routes/settings.tsx b/src/frontend/app/routes/settings.tsx
index bcda311..eae6ad8 100644
--- a/src/frontend/app/routes/settings.tsx
+++ b/src/frontend/app/routes/settings.tsx
@@ -2,6 +2,7 @@ import { type Theme, useApp } from "../AppContext";
 import "./settings.css";
 import { useTranslation } from "react-i18next";
 import { useState } from "react";
+import { getAvailableRegions } from "../data/RegionConfig";
 
 export default function Settings() {
   const { t, i18n } = useTranslation();
@@ -12,8 +13,12 @@ export default function Settings() {
     setTableStyle,
     mapPositionMode,
     setMapPositionMode,
+    region,
+    setRegion,
   } = useApp();
 
+  const regions = getAvailableRegions();
+
   return (
     <div className="page-container">
       <h1 className="page-title">{t("about.title")}</h1>
@@ -21,6 +26,23 @@ export default function Settings() {
       <section className="settings-section">
         <h2>{t("about.settings")}</h2>
         <div className="settings-content-inline">
+          <label htmlFor="region" className="form-label-inline">
+            Región:
+          </label>
+          <select
+            id="region"
+            className="form-select-inline"
+            value={region}
+            onChange={(e) => setRegion(e.target.value as any)}
+          >
+            {regions.map((r) => (
+              <option key={r.id} value={r.id}>
+                {r.name}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="settings-content-inline">
           <label htmlFor="theme" className="form-label-inline">
             {t("about.theme")}
           </label>