Blame · dropdown.tsx

4dfd09b	1	"use client";
4dfd09b	2
4dfd09b	3	import { useState, useRef, useEffect } from "react";
4dfd09b	4
4dfd09b	5	export interface DropdownProps {
4dfd09b	6	trigger: React.ReactNode;
4dfd09b	7	children: React.ReactNode;
4dfd09b	8	align?: "left" \| "right";
4dfd09b	9	className?: string;
4dfd09b	10	}
4dfd09b	11
4dfd09b	12	export function Dropdown({
4dfd09b	13	trigger,
4dfd09b	14	children,
4dfd09b	15	align = "left",
4dfd09b	16	className = "",
4dfd09b	17	}: DropdownProps) {
4dfd09b	18	const [open, setOpen] = useState(false);
4dfd09b	19	const ref = useRef<HTMLDivElement>(null);
4dfd09b	20
4dfd09b	21	useEffect(() => {
4dfd09b	22	if (!open) return;
4dfd09b	23
4dfd09b	24	function handleClick(e: MouseEvent) {
4dfd09b	25	if (ref.current && !ref.current.contains(e.target as Node)) {
4dfd09b	26	setOpen(false);
4dfd09b	27	}
4dfd09b	28	}
4dfd09b	29
4dfd09b	30	function handleKey(e: KeyboardEvent) {
4dfd09b	31	if (e.key === "Escape") setOpen(false);
4dfd09b	32	}
4dfd09b	33
4dfd09b	34	document.addEventListener("mousedown", handleClick);
4dfd09b	35	document.addEventListener("keydown", handleKey);
4dfd09b	36	return () => {
4dfd09b	37	document.removeEventListener("mousedown", handleClick);
4dfd09b	38	document.removeEventListener("keydown", handleKey);
4dfd09b	39	};
4dfd09b	40	}, [open]);
4dfd09b	41
4dfd09b	42	return (
4dfd09b	43	<div ref={ref} className={`relative ${className}`}>
4dfd09b	44	<div onClick={() => setOpen((v) => !v)}>{trigger}</div>
4dfd09b	45	{open && (
4dfd09b	46	<div
4dfd09b	47	className="absolute mt-1 py-1 min-w-[160px] z-50"
8a2c7d4	48	onClick={() => setOpen(false)}
4dfd09b	49	style={{
4dfd09b	50	backgroundColor: "var(--bg-card)",
4dfd09b	51	border: "1px solid var(--border)",
4dfd09b	52	boxShadow: "0 4px 12px rgba(0,0,0,0.1)",
4dfd09b	53	[align === "right" ? "right" : "left"]: 0,
4dfd09b	54	}}
4dfd09b	55	>
4dfd09b	56	{children}
4dfd09b	57	</div>
4dfd09b	58	)}
4dfd09b	59	</div>
4dfd09b	60	);
4dfd09b	61	}
4dfd09b	62
4dfd09b	63	export interface DropdownItemProps
4dfd09b	64	extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4dfd09b	65	active?: boolean;
4dfd09b	66	}
4dfd09b	67
4dfd09b	68	export function DropdownItem({
4dfd09b	69	active = false,
4dfd09b	70	className = "",
4dfd09b	71	style,
4dfd09b	72	children,
4dfd09b	73	...props
4dfd09b	74	}: DropdownItemProps) {
4dfd09b	75	return (
4dfd09b	76	<button
4dfd09b	77	className={`w-full text-left text-sm px-3 py-1.5 ${className}`}
4dfd09b	78	style={{
4dfd09b	79	background: active ? "var(--bg-hover)" : "none",
4dfd09b	80	border: "none",
4dfd09b	81	color: "var(--text-primary)",
4dfd09b	82	cursor: "pointer",
4dfd09b	83	font: "inherit",
4dfd09b	84	fontSize: "inherit",
4dfd09b	85	...style,
4dfd09b	86	}}
4dfd09b	87	onMouseEnter={(e) => {
4dfd09b	88	(e.currentTarget as HTMLButtonElement).style.backgroundColor =
4dfd09b	89	"var(--bg-hover)";
4dfd09b	90	}}
4dfd09b	91	onMouseLeave={(e) => {
4dfd09b	92	(e.currentTarget as HTMLButtonElement).style.backgroundColor = active
4dfd09b	93	? "var(--bg-hover)"
4dfd09b	94	: "transparent";
4dfd09b	95	}}
4dfd09b	96	{...props}
4dfd09b	97	>
4dfd09b	98	{children}
4dfd09b	99	</button>
4dfd09b	100	);
4dfd09b	101	}