80 lines
2.2 KiB
TypeScript
80 lines
2.2 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { CheckIcon, ChevronsUpDownIcon } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { numberToVersion, versionToNumber } from "@/utils/version";
|
|
|
|
const versions = [
|
|
"1.21.4",
|
|
"1.21",
|
|
"1.20",
|
|
"1.18",
|
|
"1.19",
|
|
"1.17",
|
|
"1.16",
|
|
"1.15",
|
|
"1.14",
|
|
"1.13",
|
|
"1.12",
|
|
"1.11",
|
|
"1.10",
|
|
"1.9",
|
|
"1.8",
|
|
"1.7.2",
|
|
"1.6.1",
|
|
];
|
|
|
|
interface Props {
|
|
version: number;
|
|
setVersion: React.Dispatch<React.SetStateAction<number>>;
|
|
}
|
|
|
|
function VersionCombobox({ version, setVersion }: Props) {
|
|
const [comboboxOpen, setComboboxOpen] = useState(false);
|
|
const [comboboxValue, setComboboxValue] = useState(numberToVersion(version));
|
|
|
|
useEffect(() => {
|
|
setVersion(versionToNumber(comboboxValue));
|
|
}, [comboboxValue]);
|
|
|
|
return (
|
|
<Popover open={comboboxOpen} onOpenChange={setComboboxOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline" role="combobox" aria-expanded={comboboxOpen} className="w-[200px] justify-between">
|
|
{comboboxValue ? versions.find((version) => version === comboboxValue) : "Select version..."}
|
|
|
|
<ChevronsUpDownIcon className="opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[200px] p-0 pointer-events-auto">
|
|
<Command>
|
|
<CommandInput placeholder="Search version..." />
|
|
<CommandList>
|
|
<CommandEmpty>No version found.</CommandEmpty>
|
|
<CommandGroup>
|
|
{versions.map((version) => (
|
|
<CommandItem
|
|
key={version}
|
|
value={version}
|
|
onSelect={(currentValue) => {
|
|
setComboboxValue(currentValue === comboboxValue ? versions[0] : currentValue);
|
|
setComboboxOpen(false);
|
|
}}
|
|
>
|
|
{version}
|
|
<CheckIcon className={cn("ml-auto", comboboxValue === version ? "opacity-100" : "opacity-0")} />
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
}
|
|
|
|
export default VersionCombobox;
|