refactor front end hooks

2026-03-02 00:36:38 +00:00 · 2026-02-09 20:50:36 -08:00
parent f991fd9c71
commit 911b5e6814
27 changed files with 82 additions and 183 deletions
--- a/src/components/RegionSelector.tsx
+++ b/src/components/RegionSelector.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useState } from "react";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@app/components/ui/select";
+import { InfoPopup } from "@app/components/ui/info-popup";
+import { useTranslations } from "next-intl";
+
+type Region = {
+    value: string;
+    label: string;
+    flag: string;
+};
+
+const regions: Region[] = [
+    {
+        value: "us",
+        label: "North America",
+        flag: ""
+    },
+    {
+        value: "eu",
+        label: "Europe",
+        flag: ""
+    }
+];
+
+export default function RegionSelector() {
+    const [selectedRegion, setSelectedRegion] = useState<string>("us");
+    const t = useTranslations();
+
+    const handleRegionChange = (value: string) => {
+        setSelectedRegion(value);
+        const region = regions.find((r) => r.value === value);
+        if (region) {
+            console.log(`Selected region: ${region.label}`);
+        }
+    };
+
+    return (
+        <div className="flex flex-col items-center space-y-2">
+            <label className="flex items-center gap-1 text-sm font-medium text-muted-foreground">
+                {t("regionSelectorTitle")}
+                <InfoPopup info={t("regionSelectorInfo")} />
+            </label>
+
+            <Select value={selectedRegion} onValueChange={handleRegionChange}>
+                <SelectTrigger className="w-[200px]">
+                    <SelectValue placeholder={t("regionSelectorPlaceholder")} />
+                </SelectTrigger>
+                <SelectContent>
+                    {regions.map((region) => (
+                        <SelectItem
+                            key={region.value}
+                            value={region.value}
+                            disabled={region.value === "eu"}
+                        >
+                            <div className="flex items-center space-x-2">
+                                <span className="text-lg">{region.flag}</span>
+                                <div className="flex flex-col">
+                                    <span
+                                        className={
+                                            region.value === "eu"
+                                                ? "text-muted-foreground"
+                                                : ""
+                                        }
+                                    >
+                                        {region.label}
+                                    </span>
+                                    {region.value === "eu" && (
+                                        <span className="text-xs text-muted-foreground">
+                                            {t("regionSelectorComingSoon")}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                        </SelectItem>
+                    ))}
+                </SelectContent>
+            </Select>
+        </div>
+    );
+}