SPB Git

Repository Public

dropdown.tsx 2.0 KB 45 lines tsx

1'use client';2import * as React from 'react';3import * as M from '@radix-ui/react-dropdown-menu';4import * as C from '@radix-ui/react-context-menu';5import { cn } from '@/lib/cn';67const content = 'anim-fade z-[70] min-w-44 rounded-md border border-line-2 bg-elevated p-1 text-[13px] text-text shadow-pop';8const item =9  'flex h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 outline-none data-[highlighted]:bg-hover data-[disabled]:opacity-40 pointer-coarse:h-11 pointer-coarse:text-sm';1011export const DropdownMenu = M.Root;12export const DropdownMenuTrigger = M.Trigger;13export function DropdownMenuContent({ className, align = 'end', ...props }: React.ComponentProps<typeof M.Content>) {14  return (15    <M.Portal>16      <M.Content align={align} sideOffset={6} collisionPadding={8} className={cn(content, className)} {...props} />17    </M.Portal>18  );19}20export function DropdownMenuItem({ className, danger, ...props }: React.ComponentProps<typeof M.Item> & { danger?: boolean }) {21  return <M.Item className={cn(item, danger && 'text-error', className)} {...props} />;22}23export function DropdownMenuLabel({ className, ...props }: React.ComponentProps<typeof M.Label>) {24  return <M.Label className={cn('px-2 py-1 text-[11px] font-medium uppercase tracking-wide text-muted', className)} {...props} />;25}26export function DropdownMenuSeparator() {27  return <M.Separator className="my-1 h-px bg-line-2" />;28}2930export const ContextMenu = C.Root;31export const ContextMenuTrigger = C.Trigger;32export function ContextMenuContent({ className, ...props }: React.ComponentProps<typeof C.Content>) {33  return (34    <C.Portal>35      <C.Content collisionPadding={8} className={cn(content, className)} {...props} />36    </C.Portal>37  );38}39export function ContextMenuItem({ className, danger, ...props }: React.ComponentProps<typeof C.Item> & { danger?: boolean }) {40  return <C.Item className={cn(item, danger && 'text-error', className)} {...props} />;41}42export function ContextMenuSeparator() {43  return <C.Separator className="my-1 h-px bg-line-2" />;44}45
Files main
Menu

Theme