64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
import { ChevronDown, Check } from "lucide-react";
|
|
import { GameVersion } from "@/lib/types";
|
|
import { cn } from "@/lib/utils";
|
|
import { Props } from "./props";
|
|
|
|
export default function VersionDropdown({
|
|
versions,
|
|
selectedVersion,
|
|
setSelectedVersion,
|
|
isVersionDropdownOpen,
|
|
setIsVersionDropdownOpen,
|
|
setIsAccountDropdownOpen,
|
|
versionRef,
|
|
}: Props) {
|
|
return (
|
|
<div ref={versionRef} className="relative">
|
|
<div className="relative group overflow-visible inline-block">
|
|
<div className="absolute -inset-1 bg-linear-to-r from-blue-600 to-cyan-500 rounded-md blur opacity-25 group-hover:opacity-50 transition duration-500 pointer-events-none" />
|
|
|
|
<button
|
|
onClick={() => {
|
|
setIsVersionDropdownOpen((prev: boolean) => !prev);
|
|
setIsAccountDropdownOpen(false);
|
|
}}
|
|
className="relative z-10 flex items-center gap-2 px-3 py-1.5 rounded-md btn-primary text-sm font-medium"
|
|
>
|
|
<span>{selectedVersion?.name || "Loading..."}</span>
|
|
|
|
<ChevronDown
|
|
size={14}
|
|
className={cn(
|
|
"transition-transform",
|
|
isVersionDropdownOpen && "rotate-180",
|
|
)}
|
|
/>
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
className={cn(
|
|
"absolute top-full left-0 mt-2 w-48 bg-saturn-panel border border-saturn-border rounded-lg shadow-2xl z-50 py-1 overflow-hidden transition-all duration-200 origin-top",
|
|
isVersionDropdownOpen
|
|
? "opacity-100 scale-100 translate-y-0 pointer-events-auto"
|
|
: "opacity-0 scale-95 -translate-y-2 pointer-events-none",
|
|
)}
|
|
>
|
|
{versions.map((v: GameVersion) => (
|
|
<button
|
|
key={v.id}
|
|
onClick={() => {
|
|
setSelectedVersion(v);
|
|
setIsVersionDropdownOpen(false);
|
|
}}
|
|
className="w-full flex items-center justify-between px-4 py-2 text-sm hover:bg-saturn-accent/10 hover:text-saturn-accent transition-colors"
|
|
>
|
|
<span>{v.name}</span>
|
|
{selectedVersion?.id === v.id && <Check size={14} />}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|