Grouped Context Menu

export default function Default() {
  return (
    <div className="flex min-h-[350px] w-full items-center justify-center p-10">
      <div className="relative inline-block">
        <div className="pointer-events-none absolute -top-10 -left-20 h-44 w-72 rounded-xl border border-dashed" />
        <div className="relative w-44 rounded-lg bg-popover p-1 text-left text-popover-foreground shadow-md ring-1 ring-foreground/10">
          <div className="px-1.5 py-1 text-xs font-medium text-muted-foreground">
            File
          </div>
          <div className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm">
            New File
            <span className="ml-auto text-xs tracking-widest text-muted-foreground">
              ⌘N
            </span>
          </div>
          <div className="flex items-center gap-1.5 rounded-md bg-accent px-1.5 py-1 text-sm text-accent-foreground">
            Open File
            <span className="ml-auto text-xs tracking-widest text-muted-foreground">
              ⌘O
            </span>
          </div>
          <div className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm">
            Save
            <span className="ml-auto text-xs tracking-widest text-muted-foreground">
              ⌘S
            </span>
          </div>
          <div className="-mx-1 my-1 h-px bg-border" />
          <div className="px-1.5 py-1 text-xs font-medium text-muted-foreground">
            Edit
          </div>
          <div className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm">
            Undo
            <span className="ml-auto text-xs tracking-widest text-muted-foreground">
              ⌘Z
            </span>
          </div>
          <div className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm">
            Redo
            <span className="ml-auto text-xs tracking-widest text-muted-foreground">
              ⇧⌘Z
            </span>
          </div>
          <div className="-mx-1 my-1 h-px bg-border" />
          <div className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm">
            Cut
            <span className="ml-auto text-xs tracking-widest text-muted-foreground">
              ⌘X
            </span>
          </div>
          <div className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm">
            Copy
            <span className="ml-auto text-xs tracking-widest text-muted-foreground">
              ⌘C
            </span>
          </div>
          <div className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm">
            Paste
            <span className="ml-auto text-xs tracking-widest text-muted-foreground">
              ⌘V
            </span>
          </div>
          <div className="-mx-1 my-1 h-px bg-border" />
          <div className="flex items-center gap-1.5 rounded-md px-1.5 py-1 text-sm text-destructive">
            Delete
            <span className="ml-auto text-xs tracking-widest text-destructive/70">
              ⌫
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}