1 files changed, 33 insertions, 0 deletions
diff --git a/src/frontend/app/components/RegionSelector.tsx b/src/frontend/app/components/RegionSelector.tsx
new file mode 100644
index 0000000..6c9fe8b
--- /dev/null
+++ b/src/frontend/app/components/RegionSelector.tsx
@@ -0,0 +1,33 @@
+import { useApp } from "../AppContext";
+import { getAvailableRegions } from "../data/RegionConfig";
+import "./RegionSelector.css";
+
+export function RegionSelector() {
+  const { region, setRegion } = useApp();
+  const regions = getAvailableRegions();
+
+  const handleRegionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const newRegion = e.target.value as any;
+    setRegion(newRegion);
+  };
+
+  return (
+    <div className="region-selector">
+      <label htmlFor="region-select" className="region-label">
+        Región:
+      </label>
+      <select
+        id="region-select"
+        className="region-select"
+        value={region}
+        onChange={handleRegionChange}
+      >
+        {regions.map((r) => (
+          <option key={r.id} value={r.id}>
+            {r.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}