Context Menu

"use client"


import { Globe, Plus } from "@phosphor-icons/react"
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger
} from "@glinui/ui"


export function ContextCanvasExample() {
  return (
    <div className="mx-auto w-full max-w-md">
      <ContextMenu>
        <ContextMenuTrigger className="flex h-40 items-center justify-center rounded-2xl border border-dashed border-[var(--color-border)] bg-[var(--surface-1)] text-sm text-[var(--color-muted)]">
          Right click the canvas
        </ContextMenuTrigger>
        <ContextMenuContent className="w-56">
          <ContextMenuItem><Plus aria-hidden="true" className="size-4" />New frame <ContextMenuShortcut>F</ContextMenuShortcut></ContextMenuItem>
          <ContextMenuItem><Globe aria-hidden="true" className="size-4" />Paste here <ContextMenuShortcut>Ctrl V</ContextMenuShortcut></ContextMenuItem>
          <ContextMenuSeparator />
          <ContextMenuCheckboxItem checked>Show grid</ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem>Snap to objects</ContextMenuCheckboxItem>
        </ContextMenuContent>
      </ContextMenu>
    </div>
  )
}

import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "@glinui/ui"


const variants = ["glinr", "plain", "solid", "soft", "outline", "ghost", "gradient", "glass"] as const


export function Demo() {
  return (
    <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
      {variants.map((variant) => (
        <ContextMenu key={variant} variant={variant}>
          <ContextMenuTrigger className="flex h-16 items-center justify-center rounded-lg border border-dashed text-xs">
            Right click ({variant})
          </ContextMenuTrigger>
          <ContextMenuContent>
            <ContextMenuItem>Copy</ContextMenuItem>
            <ContextMenuItem>Paste</ContextMenuItem>
            <ContextMenuSeparator />
            <ContextMenuItem>Delete</ContextMenuItem>
          </ContextMenuContent>
        </ContextMenu>
      ))}
    </div>
  )
}

import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from "@glinui/ui"


export function Demo() {
  return (
    <ContextMenu variant="glass">
      <ContextMenuTrigger className="flex h-32 w-72 items-center justify-center rounded-xl border border-dashed border-[var(--color-border)] text-sm text-[var(--color-muted)]">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuLabel>Actions</ContextMenuLabel>
        <ContextMenuItem>Back <ContextMenuShortcut>Cmd [</ContextMenuShortcut></ContextMenuItem>
        <ContextMenuItem>Reload <ContextMenuShortcut>Cmd R</ContextMenuShortcut></ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuCheckboxItem checked>Show bookmarks</ContextMenuCheckboxItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}