107 lines
3.3 KiB
TypeScript
107 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import { ChevronDown } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface Option<T = string> {
|
|
value: T;
|
|
label: React.ReactNode;
|
|
description?: string;
|
|
}
|
|
|
|
export function Dropdown<T extends string>({
|
|
options,
|
|
value,
|
|
onChange,
|
|
placeholder = "Select...",
|
|
className,
|
|
label,
|
|
size = "md",
|
|
tone = "secondary",
|
|
icon,
|
|
empty = "No options",
|
|
}: {
|
|
options: Option<T>[];
|
|
value?: T;
|
|
onChange: (v: T) => void;
|
|
placeholder?: string;
|
|
className?: string;
|
|
label?: string;
|
|
size?: "sm" | "md";
|
|
tone?: "secondary" | "ghost";
|
|
icon?: React.ReactNode;
|
|
empty?: string;
|
|
}) {
|
|
const [open, setOpen] = useState(false);
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
function h(e: MouseEvent) {
|
|
if (!ref.current) return;
|
|
if (!ref.current.contains(e.target as Node)) setOpen(false);
|
|
}
|
|
document.addEventListener("mousedown", h);
|
|
return () => document.removeEventListener("mousedown", h);
|
|
}, []);
|
|
|
|
const current = options.find((o) => o.value === value);
|
|
const btnClass = cn(
|
|
"inline-flex items-center gap-2 border rounded-lg transition-colors",
|
|
size === "sm" ? "text-xs px-2.5 py-1.5" : "text-sm px-3 py-2",
|
|
tone === "secondary"
|
|
? "bg-white border-slate-200 text-slate-700 hover:bg-slate-50"
|
|
: "bg-transparent border-transparent text-slate-700 hover:bg-slate-100",
|
|
);
|
|
|
|
return (
|
|
<div className={cn("relative inline-block text-left", className)} ref={ref}>
|
|
{label && <div className="text-[11px] uppercase tracking-wide text-slate-500 mb-1">{label}</div>}
|
|
<button
|
|
type="button"
|
|
className={btnClass}
|
|
onClick={() => setOpen((v) => !v)}
|
|
>
|
|
{icon && <span className="text-slate-500">{icon}</span>}
|
|
<span className={cn("truncate", !current && "text-slate-400")}>
|
|
{current?.label ?? placeholder}
|
|
</span>
|
|
<ChevronDown className={cn("w-4 h-4 text-slate-400 transition-transform", open && "rotate-180")} />
|
|
</button>
|
|
|
|
{open && (
|
|
<div className="absolute z-30 mt-1 right-0 min-w-[240px] rounded-xl bg-white border border-slate-200 shadow-soft overflow-hidden animate-fade-in">
|
|
{options.length === 0 ? (
|
|
<div className="px-4 py-6 text-sm text-slate-500 text-center">{empty}</div>
|
|
) : (
|
|
<ul className="max-h-80 overflow-auto py-1">
|
|
{options.map((o) => (
|
|
<li key={String(o.value)}>
|
|
<button
|
|
type="button"
|
|
className={cn(
|
|
"w-full text-left px-3 py-2 text-sm transition-colors",
|
|
value === o.value
|
|
? "bg-brand-50 text-brand-700 font-medium"
|
|
: "text-slate-700 hover:bg-slate-50",
|
|
)}
|
|
onClick={() => {
|
|
onChange(o.value);
|
|
setOpen(false);
|
|
}}
|
|
>
|
|
<div className="truncate">{o.label}</div>
|
|
{o.description && (
|
|
<div className="text-xs text-slate-500 mt-0.5 truncate">{o.description}</div>
|
|
)}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|