Command

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator
} from '@jamie/ui/command'
import { CalendarIcon, FileTextIcon, MicIcon, SparklesIcon } from 'lucide-react'
 
export function CommandDemo() {
  return (
    <Command className="rounded-lg border shadow-md w-[400px]">
      <CommandInput placeholder="Search meetings..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Recent Meetings">
          <CommandItem>
            <CalendarIcon className="size-4" />
            <span>Q3 Revenue Review</span>
          </CommandItem>
          <CommandItem>
            <CalendarIcon className="size-4" />
            <span>Budget Planning Sync</span>
          </CommandItem>
          <CommandItem>
            <CalendarIcon className="size-4" />
            <span>Investor Call Prep</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Actions">
          <CommandItem>
            <SparklesIcon className="size-4" />
            <span>Ask AI</span>
          </CommandItem>
          <CommandItem>
            <FileTextIcon className="size-4" />
            <span>View Transcripts</span>
          </CommandItem>
          <CommandItem>
            <MicIcon className="size-4" />
            <span>Start Recording</span>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

'use client'
 
import { Button } from '@jamie/ui/button'
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator
} from '@jamie/ui/command'
import { CalendarIcon, FileTextIcon, SparklesIcon } from 'lucide-react'
import { useState } from 'react'
 
export function CommandDialogDemo() {
  const [open, setOpen] = useState(false)
 
  return (
    <>
      <Button variant="outline" onClick={() => setOpen(true)}>
        <span>Search meetings...</span>
      </Button>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <Command>
          <CommandInput placeholder="Search meetings..." />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Recent Meetings">
              <CommandItem>
                <CalendarIcon className="size-4" />
                <span>Q3 Revenue Review</span>
              </CommandItem>
              <CommandItem>
                <CalendarIcon className="size-4" />
                <span>Month-End Close Debrief</span>
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Actions">
              <CommandItem>
                <SparklesIcon className="size-4" />
                <span>Ask AI</span>
              </CommandItem>
              <CommandItem>
                <FileTextIcon className="size-4" />
                <span>View Transcripts</span>
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>
    </>
  )
}