UserPicker

Formulário

Escolhe uma pessoa numa lista longa: busca por nome, e-mail ou cargo, mostra o avatar e o cargo, e carrega mais conforme rola. Funciona dentro de painel lateral.

Substitui no Brain:EscolherPessoaListaDePessoasds UserPicker

Adicionar responsável

Responsáveis

"use client";

import { FormField, toast, UserPicker } from "@paytime/ui";
import { useState } from "react";

const PEOPLE = [
  { id: "1", name: "Ana Costa", email: "ana@paytime.com.br", role: "Analista financeira" },
  { id: "2", name: "Bruno Lima", email: "bruno@paytime.com.br", role: "Coordenador comercial" },
  { id: "3", name: "Carla Dias", email: "carla@paytime.com.br", role: "Designer" },
  { id: "4", name: "Diego Rocha", email: "diego@paytime.com.br", role: "Engenheiro de dados" },
  { id: "5", name: "Elisa Moura", email: "elisa@paytime.com.br", role: "Gerente de operações" },
];

export default function Example() {
  const [chosen, setChosen] = useState<string[]>(["2"]);
  return (
    <FormField label="Responsáveis" className="max-w-sm">
      <UserPicker
        people={PEOPLE}
        selectedIds={chosen}
        placeholder="Adicionar responsável"
        onSelect={(id) => {
          setChosen((current) => (current.includes(id) ? current.filter((item) => item !== id) : [...current, id]));
          toast.success("Responsáveis atualizados");
        }}
      />
    </FormField>
  );
}