68 lines
3.0 KiB
TypeScript
68 lines
3.0 KiB
TypeScript
"use client";
|
|
import { useState, useRef, useEffect } from "react";
|
|
import { FiChevronDown, FiCheck } from "react-icons/fi";
|
|
import { useTheme } from "@/context/ThemeContext";
|
|
import { SORT_OPTIONS } from "./sortOptions";
|
|
|
|
interface Props { value: string; onChange: (v: string) => void; }
|
|
|
|
export function SortDropdown({ value, onChange }: Props) {
|
|
const [open, setOpen] = useState(false);
|
|
const { isDark } = useTheme();
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const active = SORT_OPTIONS.find((o) => o.value === value) ?? SORT_OPTIONS[0];
|
|
|
|
useEffect(() => {
|
|
const handler = (e: MouseEvent) => {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
|
};
|
|
document.addEventListener("mousedown", handler);
|
|
return () => document.removeEventListener("mousedown", handler);
|
|
}, []);
|
|
|
|
const triggerCl = isDark
|
|
? "bg-slate-900 border-slate-700 text-slate-200 hover:border-violet-500/50"
|
|
: "bg-white border-slate-200 text-slate-700 hover:border-violet-400";
|
|
const menuCl = isDark
|
|
? "bg-slate-900 border-slate-700 shadow-xl shadow-black/40"
|
|
: "bg-white border-slate-200 shadow-xl shadow-slate-200/60";
|
|
|
|
return (
|
|
<div ref={ref} className="relative">
|
|
<button
|
|
onClick={() => setOpen((p) => !p)}
|
|
className={`flex items-center gap-2 h-9 pl-3 pr-2.5 rounded-xl border text-xs font-medium transition-all ${triggerCl} ${open ? "border-violet-500/60" : ""}`}
|
|
>
|
|
<active.icon className={`text-sm shrink-0 ${isDark ? "text-violet-400" : "text-violet-500"}`} />
|
|
<span className="whitespace-nowrap">{active.label}</span>
|
|
<FiChevronDown className={`text-slate-400 text-xs shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
|
|
</button>
|
|
|
|
{open && (
|
|
<div className={`absolute right-0 top-full mt-1.5 z-50 min-w-[188px] rounded-2xl border overflow-hidden ${menuCl}`}>
|
|
<div className="py-1.5">
|
|
{SORT_OPTIONS.map((opt) => {
|
|
const isActive = opt.value === value;
|
|
return (
|
|
<button
|
|
key={opt.value}
|
|
onClick={() => { onChange(opt.value); setOpen(false); }}
|
|
className={`w-full flex items-center gap-3 px-3.5 py-2.5 text-xs font-medium transition-colors text-left ${
|
|
isActive
|
|
? isDark ? "bg-violet-600/20 text-violet-300" : "bg-violet-50 text-violet-700"
|
|
: isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-600 hover:bg-slate-50"
|
|
}`}
|
|
>
|
|
<opt.icon className={`text-sm shrink-0 ${isActive ? (isDark ? "text-violet-400" : "text-violet-500") : "text-slate-400"}`} />
|
|
<span className="flex-1">{opt.label}</span>
|
|
{isActive && <FiCheck className={`text-xs shrink-0 ${isDark ? "text-violet-400" : "text-violet-500"}`} />}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|