Dropdown Menu

import { Button } from '@jamie/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger
} from '@jamie/ui/dropdown-menu'
import {
  CopyIcon,
  FileTextIcon,
  MoreHorizontalIcon,
  ShareIcon,
  SparklesIcon,
  TrashIcon
} from 'lucide-react'
 
export function DropdownMenuDemo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        <MoreHorizontalIcon className="size-4" />
        Meeting Options
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuItem>
          <FileTextIcon className="size-4" />
          View Transcript
          <DropdownMenuShortcut>⌘T</DropdownMenuShortcut>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <SparklesIcon className="size-4" />
          Ask AI
        </DropdownMenuItem>
        <DropdownMenuItem>
          <CopyIcon className="size-4" />
          Copy Summary
        </DropdownMenuItem>
        <DropdownMenuItem>
          <ShareIcon className="size-4" />
          Share
        </DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem variant="destructive">
          <TrashIcon className="size-4" />
          Delete Meeting
          <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

'use client'
 
import { Button } from '@jamie/ui/button'
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger
} from '@jamie/ui/dropdown-menu'
import { DownloadIcon } from 'lucide-react'
import { useState } from 'react'
 
export function DropdownMenuWithSubmenuDemo() {
  const [showSpeakers, setShowSpeakers] = useState(true)
  const [showTimestamps, setShowTimestamps] = useState(false)
  const [format, setFormat] = useState('pdf')
 
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        <DownloadIcon className="size-4" />
        Export
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Include</DropdownMenuLabel>
          <DropdownMenuCheckboxItem checked={showSpeakers} onCheckedChange={setShowSpeakers}>
            Speaker Labels
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem checked={showTimestamps} onCheckedChange={setShowTimestamps}>
            Timestamps
          </DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Export Format</DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <DropdownMenuRadioGroup value={format} onValueChange={setFormat}>
              <DropdownMenuRadioItem value="pdf">PDF</DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="docx">Word (.docx)</DropdownMenuRadioItem>
              <DropdownMenuRadioItem value="md">Markdown</DropdownMenuRadioItem>
            </DropdownMenuRadioGroup>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuItem>
          <DownloadIcon className="size-4" />
          Download
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}