Select

import { ChatCircleIcon, PhoneIcon, WhatsappLogoIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import type { Key } from 'react-aria-components';
import { Select, SelectItem } from '@arbol-ai/ui';

const ChannelExample = () => {
  const [channel, setChannel] = useState<Key | null>('whatsapp');
  return (
    <Select
      className="max-w-xs"
      description="Where the reminder is sent."
      label="Channel"
      onChange={setChannel}
      value={channel}
    >
      <SelectItem id="whatsapp" textValue="WhatsApp">
        <WhatsappLogoIcon aria-hidden /> WhatsApp
      </SelectItem>
      <SelectItem id="web" textValue="Web chat">
        <ChatCircleIcon aria-hidden /> Web chat
      </SelectItem>
      <SelectItem id="voice" textValue="Phone call">
        <PhoneIcon aria-hidden /> Phone call
      </SelectItem>
    </Select>
  );
};

<ChannelExample />

import { Select, SelectItem, SelectSection } from '@arbol-ai/ui';

<Select className="max-w-xs" defaultValue="confirmed" label="Appointment status">
  <SelectSection title="Upcoming">
    <SelectItem id="booked">Booked</SelectItem>
    <SelectItem id="confirmed">Confirmed</SelectItem>
  </SelectSection>
  <SelectSection title="Closed">
    <SelectItem id="attended">Attended</SelectItem>
    <SelectItem id="no-show">No-show</SelectItem>
    <SelectItem id="cancelled">Cancelled</SelectItem>
  </SelectSection>
</Select>

import { Select, SelectItem } from '@arbol-ai/ui';

<Select
  className="max-w-xs"
  defaultValue={['mon', 'wed']}
  label="Calling days"
  selectionMode="multiple"
>
  <SelectItem id="mon">Monday</SelectItem>
  <SelectItem id="tue">Tuesday</SelectItem>
  <SelectItem id="wed">Wednesday</SelectItem>
  <SelectItem id="thu">Thursday</SelectItem>
  <SelectItem id="fri">Friday</SelectItem>
</Select>

import { Select, SelectItem } from '@arbol-ai/ui';

<Select aria-label="Agent" className="w-44" defaultValue="all" size="sm">
  <SelectItem id="all">All agents</SelectItem>
  <SelectItem id="front-desk">Front desk</SelectItem>
  <SelectItem id="collections">Collections</SelectItem>
</Select>