Context Menu

"use client";

import { useState } from "react";
import { Copy, PencilLine, Share2, Trash2 } from "lucide-react";
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuItem,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuCheckboxItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger,
  contextMenuTriggerClassName,
} from "@/components/ui/b-context-menu";

export function ContextMenuPreview() {
  const [open, setOpen] = useState(false);
  const [person, setPerson] = useState("pedro");
  return (
    <ContextMenu>
      <ContextMenuTrigger asChild className="w-full max-w-xl">
        <div className={contextMenuTriggerClassName + " w-full border border-border/80 px-6 py-14 text-center"}>
          <p className="font-medium text-[15px] tracking-[-0.02em]">Right-click this block</p>
        </div>
      </ContextMenuTrigger>
      <ContextMenuContent className="w-52" collisionPadding={8}>
        <ContextMenuGroup>
          <ContextMenuItem>
            <PencilLine className="size-3.5 opacity-70" />
            Rename
            <ContextMenuShortcut>R</ContextMenuShortcut>
          </ContextMenuItem>
          <ContextMenuItem>
            <Copy className="size-3.5 opacity-70" />
            Duplicate
          </ContextMenuItem>
          <ContextMenuItem>
            <Share2 className="size-3.5 opacity-70" />
            Share
          </ContextMenuItem>
          <ContextMenuSub>
            <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
            <ContextMenuSubContent className="w-44">
              <ContextMenuItem>Save Page...</ContextMenuItem>
              <ContextMenuItem>Create Shortcut...</ContextMenuItem>
            </ContextMenuSubContent>
          </ContextMenuSub>
          <ContextMenuSeparator />
          <ContextMenuItem variant="destructive">
            <Trash2 className="size-3.5 opacity-70" />
            Delete
            <ContextMenuShortcut>Del</ContextMenuShortcut>
          </ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuGroup>
          <ContextMenuCheckboxItem checked>Show Shortcuts</ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem disabled>Show Metadata</ContextMenuCheckboxItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuGroup>
          <ContextMenuRadioGroup value={person} onValueChange={setPerson}>
            <ContextMenuLabel>People</ContextMenuLabel>
            <ContextMenuRadioItem value="pedro">Pedro Duarte</ContextMenuRadioItem>
            <ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
          </ContextMenuRadioGroup>
        </ContextMenuGroup>
      </ContextMenuContent>
    </ContextMenu>
  );
}