Select

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@jamie/ui/select'
 
const items = [
  { label: 'All meetings', value: 'all' },
  { label: 'Upcoming', value: 'upcoming' },
  { label: 'Completed', value: 'completed' },
  { label: 'Processing', value: 'processing' }
]
 
export function SelectDemo() {
  return (
    <Select defaultValue="all" items={items}>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Filter meetings" />
      </SelectTrigger>
      <SelectContent>
        {items.map((item) => (
          <SelectItem key={item.value} value={item.value}>
            {item.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue
} from '@jamie/ui/select'
 
const documents = [
  { label: 'Full Transcript', value: 'transcript' },
  { label: 'Meeting Summary', value: 'summary' },
  { label: 'Action Items', value: 'action-items' }
]
 
const integrations = [
  { label: 'Send to Slack', value: 'slack' },
  { label: 'Export to Notion', value: 'notion' },
  { label: 'Email Recap', value: 'email' }
]
 
const allItems = [...documents, ...integrations]
 
export function SelectWithGroupsDemo() {
  return (
    <Select defaultValue="transcript" items={allItems}>
      <SelectTrigger className="w-[220px]">
        <SelectValue placeholder="Export format" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Documents</SelectLabel>
          {documents.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectGroup>
        <SelectGroup>
          <SelectLabel>Integrations</SelectLabel>
          {integrations.map((item) => (
            <SelectItem key={item.value} value={item.value}>
              {item.label}
            </SelectItem>
          ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}