Pick list

import { useState } from 'react';
import { PickList } from '@arbol-ai/ui';
import type { PickListItem } from '@arbol-ai/ui';

const SPECIALTIES = ['General medicine', 'Pediatrics', 'Dermatology', 'Cardiology'];

const SITES = ['North clinic', 'South clinic', 'Downtown'];

const PROFESSIONALS: PickListItem[] = Array.from({ length: 400 }, (_, index) => ({
  id: `pro_${index}`,
  label: `Dr. ${['Ana', 'Luis', 'Marta', 'Jorge', 'Sofía'][index % 5]} ${['Ruiz', 'Torres', 'Gómez', 'Díaz'][index % 4]} ${index + 1}`,
  meta: SITES[index % SITES.length],
  group: SPECIALTIES[index % SPECIALTIES.length],
}));

const ProfessionalsExample = () => {
  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set(['pro_0']));
  return (
    <PickList
      className="max-w-md"
      items={PROFESSIONALS}
      label="Professionals"
      onChange={setSelected}
      placeholder="Search professionals"
      selected={selected}
    />
  );
};

<ProfessionalsExample />

import { useState } from 'react';
import { PickList } from '@arbol-ai/ui';

const PermissionsExample = () => {
  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set());
  return (
    <PickList
      className="max-w-md"
      items={[
        { id: 'contacts:read', label: 'contacts:read', code: true, meta: 'See contacts and their history' },
        { id: 'contacts:write', label: 'contacts:write', code: true, meta: 'Create and edit contacts' },
        { id: 'campaigns:write', label: 'campaigns:write', code: true, meta: 'Start and pause campaigns' },
        {
          id: 'billing:manage',
          label: 'billing:manage',
          code: true,
          disabled: true,
          meta: 'Only organization owners can grant it',
        },
      ]}
      label="Permissions"
      onChange={setSelected}
      placeholder="Search permissions"
      selected={selected}
    />
  );
};

<PermissionsExample />