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) => ( +
+
+ {data.label} +
+
+ ); + + 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 (