Chungus

src/components/private/RegionSelector.tsx

@@ -0,0 +1,101 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+"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>
+    );
+}