diff --git a/src/app/[locale]/(main)/clubs/ClubTable.tsx b/src/app/[locale]/(main)/clubs/ClubTable.tsx
index a8d4a6c..8e3abce 100644
--- a/src/app/[locale]/(main)/clubs/ClubTable.tsx
+++ b/src/app/[locale]/(main)/clubs/ClubTable.tsx
@@ -44,6 +44,7 @@ const ClubTable = () => {
"flex flex-1",
}}
diff --git a/src/app/[locale]/(main)/tournaments/TournamentTable.tsx b/src/app/[locale]/(main)/tournaments/TournamentTable.tsx
index f2f9041..7b8ac13 100644
--- a/src/app/[locale]/(main)/tournaments/TournamentTable.tsx
+++ b/src/app/[locale]/(main)/tournaments/TournamentTable.tsx
@@ -103,7 +103,7 @@ const TournamentTable = () => {
-
+
diff --git a/src/components/RegionSelect.tsx b/src/components/RegionSelect.tsx
index f0246d6..bba54f8 100644
--- a/src/components/RegionSelect.tsx
+++ b/src/components/RegionSelect.tsx
@@ -1,23 +1,34 @@
import { useAtom } from "jotai";
import { useTranslations } from "next-intl";
-import { SingleValue } from "react-select";
+import { IoAdd } from "react-icons/io5";
+import { GroupBase, OptionsOrGroups, SingleValue } from "react-select";
import { regionFilterAtom } from "@/atoms";
import { BaseOption, Select, SelectProps } from "@/components/form/Select";
import { useZones } from "@/hooks/useZones";
import { Zone } from "@/server/myZones";
+import { useRouter } from "@/utils/navigation";
-type RegionSelectProps = Omit
;
+type RegionSelectProps = Omit & {
+ syncTitle: string;
+};
-export const RegionSelect = (selectProps: RegionSelectProps) => {
- const t = useTranslations("Tournaments");
+type RegionOption = BaseOption;
+type GroupedOption = GroupBase;
+
+export const RegionSelect = ({
+ syncTitle,
+ ...selectProps
+}: RegionSelectProps) => {
+ const t = useTranslations("Zones");
+ const router = useRouter();
const [regionFilter, setRegionFilter] = useAtom(regionFilterAtom);
const { zones } = useZones();
- const zoneFilterOptions: BaseOption[] = [
+ const zoneFilterOptions: OptionsOrGroups = [
{
value: "map",
- label: t("syncWithMapOption"),
+ label: syncTitle,
data: null,
},
{
@@ -26,32 +37,71 @@ export const RegionSelect = (selectProps: RegionSelectProps) => {
data: null,
},
- ...zones.map((zone) => ({
- value: zone.id,
- label: zone.name,
- data: zone,
- })),
+ {
+ label: t("yourZonesSelectGroupHeader"),
+ options: [
+ ...zones.map((zone) => ({
+ value: zone.id,
+ label: zone.name,
+ data: zone,
+ })),
+
+ {
+ value: "create",
+ label: t("createZoneSelectOption"),
+ data: null,
+ },
+ ],
+ },
];
- const onChange = (option: SingleValue>) => {
+ const onChange = (option: SingleValue) => {
if (!option) return;
+ if (option.value === "create") {
+ router.push("/zones/create");
+ return;
+ }
if (option.value === "map" || option.value === "all")
setRegionFilter(option.value);
else setRegionFilter(option.data!);
};
+ const formatGroupLabel = (data: GroupedOption) => (
+
+ );
+
+ const formatOptionLabel = (option: RegionOption) => {
+ if (option.value === "create")
+ return (
+
+
+ {option.label}
+
+ );
+
+ return option.label;
+ };
+
+ const allOptions = zoneFilterOptions.flatMap((groupOrOption) =>
+ "options" in groupOrOption ? groupOrOption.options : groupOrOption,
+ );
+
return (