Context Menu

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
} from "@araf-ds/core"

export default function Example() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="border-2 border-dashed rounded-lg p-8 text-sm text-muted-foreground">
        Right-click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-48">
        <ContextMenuItem>
          <EditIcon size={13} /> Edit
          <ContextMenuShortcut>⌘E</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <LinkIcon size={13} /> Copy link
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <TrashIcon size={13} /> Delete
          <ContextMenuShortcut>⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

<ContextMenuContent>
  <ContextMenuCheckboxItem
    checked={showBookmarks}
    onCheckedChange={setShowBookmarks}
  >
    Show bookmarks <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
  </ContextMenuCheckboxItem>
  <ContextMenuSeparator />
  <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
    <ContextMenuLabel>People</ContextMenuLabel>
    <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
    <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
  </ContextMenuRadioGroup>
</ContextMenuContent>

<ContextMenu>
  <ContextMenuTrigger asChild>
    <TableRow className="cursor-context-menu">
      <TableCell>{row.name}</TableCell>
      <TableCell>{row.status}</TableCell>
    </TableRow>
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem onSelect={() => editRow(row.id)}>
      <EditIcon size={13} /> Edit
    </ContextMenuItem>
    <ContextMenuItem onSelect={() => duplicateRow(row.id)}>
      <CopyIcon size={13} /> Duplicate
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem variant="destructive" onSelect={() => deleteRow(row.id)}>
      <TrashIcon size={13} /> Delete
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>