40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export const ContextMenu = ContextMenuPrimitive.Root;
|
|
export const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
|
|
export const ContextMenuPortal = ContextMenuPrimitive.Portal;
|
|
|
|
export function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
|
|
return (
|
|
<ContextMenuPrimitive.Portal>
|
|
<ContextMenuPrimitive.Content
|
|
className={cn(
|
|
'z-50 min-w-[220px] overflow-hidden rounded-2xl border border-[#dce3ec] bg-white p-1.5 text-[#1f2430] shadow-[0_12px_40px_rgba(31,36,48,0.12)] animate-in fade-in zoom-in-95 duration-150',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
</ContextMenuPrimitive.Portal>
|
|
);
|
|
}
|
|
|
|
export function ContextMenuItem({ className, inset, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Item> & { inset?: boolean }) {
|
|
return (
|
|
<ContextMenuPrimitive.Item
|
|
className={cn(
|
|
'flex cursor-pointer select-none items-center gap-3 rounded-xl px-3 py-2.5 text-sm outline-none data-[highlighted]:bg-[#f4f5f8] data-[highlighted]:text-[#1f2430]',
|
|
inset && 'pl-8',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function ContextMenuSeparator({ className, ...props }: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
|
|
return <ContextMenuPrimitive.Separator className={cn('my-1 h-px bg-[#eceef4]', className)} {...props} />;
|
|
}
|