diff --git a/src/routes/viewer/PhaseSelect/LangSelect/index.tsx b/src/routes/viewer/PhaseSelect/LangSelect/index.tsx new file mode 100644 index 00000000..562f4933 --- /dev/null +++ b/src/routes/viewer/PhaseSelect/LangSelect/index.tsx @@ -0,0 +1,56 @@ +import { Removable } from "@/components/custom-ui/Removable"; +import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; + +export type Lang = "ITA" | "ENG"; +const langs = [ + { + label: 🇮🇹, + value: "ITA", + }, + { + label: 🇬🇧, + value: "ENG", + }, +] as const; + +export type LangSelectProps = { + canChoose: boolean; + selectedLang: Lang; + onChange: (newLang: Lang) => void; +}; + +export default function LangSelect({ + canChoose, + selectedLang, + onChange, +}: LangSelectProps) { + const selectedLangOption = langs.find((l) => l.value === selectedLang); + if (!selectedLangOption) return <>; + + return ( +
+

Lingua

+ {canChoose ? ( + onChange(v as Lang)} + className="flex flex-1" + > + + {langs.map((lang) => ( + + {lang.label} + + ))} + + + ) : ( + {selectedLangOption.label} + )} +
+ ); +} diff --git a/src/routes/viewer/PhaseSelect/RankingSelect/Combobox.tsx b/src/routes/viewer/PhaseSelect/RankingSelect/Combobox.tsx index 9e4a8c63..f8436dd6 100644 --- a/src/routes/viewer/PhaseSelect/RankingSelect/Combobox.tsx +++ b/src/routes/viewer/PhaseSelect/RankingSelect/Combobox.tsx @@ -15,7 +15,6 @@ import { Button } from "@/components/ui/button"; import { ScrollArea } from "@/components/ui/scroll-area"; import { State } from "@/utils/types/state"; import { PhaseLink } from "@/utils/types/data/parsed/Index/RankingFile"; -import PhaseFlag from "@/components/custom-ui/PhaseFlag"; export type RankingComboboxProps = { rankingOpen: State; @@ -42,7 +41,7 @@ export default function RankingCombobox({ @@ -58,8 +57,7 @@ export default function RankingCombobox({ onSelect={handleChange} value={phase.href} > - {phase.name} - + {phase.name} ))} diff --git a/src/routes/viewer/PhaseSelect/RankingSelect/Tabs.tsx b/src/routes/viewer/PhaseSelect/RankingSelect/Tabs.tsx index e1a1dd01..60bf2337 100644 --- a/src/routes/viewer/PhaseSelect/RankingSelect/Tabs.tsx +++ b/src/routes/viewer/PhaseSelect/RankingSelect/Tabs.tsx @@ -1,4 +1,3 @@ -import PhaseFlag from "@/components/custom-ui/PhaseFlag"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { PhaseLink } from "@/utils/types/data/parsed/Index/RankingFile"; @@ -35,7 +34,7 @@ export default function RankingTabs({ value={phase.href} key={phase.href} > - {phase.name} + {phase.name} ))} diff --git a/src/routes/viewer/PhaseSelect/index.tsx b/src/routes/viewer/PhaseSelect/index.tsx index e113e90f..888d4663 100644 --- a/src/routes/viewer/PhaseSelect/index.tsx +++ b/src/routes/viewer/PhaseSelect/index.tsx @@ -9,6 +9,7 @@ import { NO_GROUP } from "@/utils/constants"; import { State } from "@/utils/types/state"; import RankingSelect from "./RankingSelect"; import GroupSelect from "./GroupSelect"; +import LangSelect, { Lang } from "./LangSelect"; export type GroupSelectProps = { groups: PhaseGroup[]; @@ -30,8 +31,22 @@ export default function PhaseSelect(props: Props) { const groupOpen = useState(false); const rankingOpen = useState(false); - const filteredPhases = selectedGroup.phases.filter( - (a) => phases.all.findIndex((b) => a.href === b.href) !== -1, + const [selectedLang, setSelectedLang] = useState( + selectedPhase.order.isEnglish ? "ENG" : "ITA", + ); + + const showLangs = + phases.all.filter((p) => p.order.isEnglish).length > 0 && + phases.all.filter((p) => !p.order.isEnglish).length > 0; + + const filteredPhases = useMemo( + () => + selectedGroup.phases + .filter((a) => phases.all.findIndex((b) => a.href === b.href) !== -1) + .filter( + (a) => !showLangs || a.order.isEnglish === (selectedLang === "ENG"), + ), + [phases.all, selectedGroup.phases, selectedLang, showLangs], ); const isCombobox = useMemo( @@ -57,6 +72,21 @@ export default function PhaseSelect(props: Props) { onChange(link, group); } + function handleOnLangChange(newLang: Lang): void { + setSelectedLang(newLang); + + const filteredUpdated = phases.all.filter( + (p) => p.order.isEnglish === (newLang === "ENG"), + ); + if (filteredUpdated.length === 0) return; + + const firstValidPhase = filteredUpdated[0]; + const group = phases.groups.get(firstValidPhase.group.value); + if (!group) return; + + onChange(firstValidPhase, group); + } + return (
{showGroups && ( @@ -68,6 +98,11 @@ export default function PhaseSelect(props: Props) { groups={phases.groups} /> )} +