65 lines
No EOL
1.5 KiB
TypeScript
65 lines
No EOL
1.5 KiB
TypeScript
"use client";
|
|
|
|
import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
|
|
|
|
import { cn } from "@/lib/cn";
|
|
|
|
export const Dropdown = DropdownMenu.Root;
|
|
export const DropdownTrigger = DropdownMenu.Trigger;
|
|
|
|
export function DropdownContent({
|
|
children,
|
|
align = "start",
|
|
className,
|
|
}: {
|
|
children: React.ReactNode;
|
|
align?: "start" | "center" | "end";
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<DropdownMenu.Portal>
|
|
<DropdownMenu.Content
|
|
align={align}
|
|
sideOffset={6}
|
|
className={cn(
|
|
"z-50 min-w-56 rounded-xl border border-border-subtle bg-panel p-1",
|
|
"shadow-[var(--shadow-panel)]",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Portal>
|
|
);
|
|
}
|
|
|
|
export function DropdownItem({
|
|
children,
|
|
onSelect,
|
|
active,
|
|
}: {
|
|
children: React.ReactNode;
|
|
onSelect?: () => void;
|
|
active?: boolean;
|
|
}) {
|
|
return (
|
|
<DropdownMenu.Item
|
|
onSelect={onSelect}
|
|
className={cn(
|
|
"flex cursor-pointer select-none items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-none",
|
|
"data-[highlighted]:bg-surface-raised",
|
|
active ? "text-brand" : "text-text-secondary"
|
|
)}
|
|
>
|
|
{children}
|
|
</DropdownMenu.Item>
|
|
);
|
|
}
|
|
|
|
export function DropdownLabel({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<DropdownMenu.Label className="px-2.5 py-1.5 text-[11px] font-medium uppercase tracking-wide text-text-muted">
|
|
{children}
|
|
</DropdownMenu.Label>
|
|
);
|
|
} |