Context Menu

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuTrigger
} from '@jamie/ui/context-menu'
import { CopyIcon, FileTextIcon, ShareIcon, SparklesIcon, TrashIcon } from 'lucide-react'
 
export function ContextMenuDemo() {
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuItem>
          <FileTextIcon className="size-4" />
          View Transcript
          <ContextMenuShortcut>⌘T</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <SparklesIcon className="size-4" />
          Ask AI
          <ContextMenuShortcut>⌘A</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuItem>
          <CopyIcon className="size-4" />
          Copy Summary
          <ContextMenuShortcut>⌘C</ContextMenuShortcut>
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>
          <ShareIcon className="size-4" />
          Share
        </ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem variant="destructive">
          <TrashIcon className="size-4" />
          Delete
          <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  )
}

'use client'
 
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuGroup,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger
} from '@jamie/ui/context-menu'
import { useState } from 'react'
 
export function ContextMenuWithSubmenuDemo() {
  const [speakerLabels, setSpeakerLabels] = useState(true)
  const [timestamps, setTimestamps] = useState(false)
  const [format, setFormat] = useState('bullets')
 
  return (
    <ContextMenu>
      <ContextMenuTrigger className="flex h-36 w-72 items-center justify-center rounded-md border border-dashed text-sm">
        Right click here
      </ContextMenuTrigger>
      <ContextMenuContent className="w-56">
        <ContextMenuGroup>
          <ContextMenuLabel>Display Options</ContextMenuLabel>
          <ContextMenuCheckboxItem checked={speakerLabels} onCheckedChange={setSpeakerLabels}>
            Speaker Labels
          </ContextMenuCheckboxItem>
          <ContextMenuCheckboxItem checked={timestamps} onCheckedChange={setTimestamps}>
            Timestamps
          </ContextMenuCheckboxItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuSub>
          <ContextMenuSubTrigger>Summary Format</ContextMenuSubTrigger>
          <ContextMenuSubContent>
            <ContextMenuRadioGroup value={format} onValueChange={setFormat}>
              <ContextMenuRadioItem value="bullets">Bullet Points</ContextMenuRadioItem>
              <ContextMenuRadioItem value="paragraph">Paragraph</ContextMenuRadioItem>
              <ContextMenuRadioItem value="action-items">Action Items Only</ContextMenuRadioItem>
            </ContextMenuRadioGroup>
          </ContextMenuSubContent>
        </ContextMenuSub>
      </ContextMenuContent>
    </ContextMenu>
  )
}