Toolbar

Estrutura

Linha acima de uma lista: a busca à esquerda, com a largura de uma coluna de uma grade de quatro (a mesma em toda tela), e à direita a troca de visão e o FilterButton. A ação de criar fica no cabeçalho da página, não aqui. Empilha no celular.

Substitui no Brain:ui toolbarpartners Toolbar

Busca, troca de visão e filtros

"use client";

import { FilterButton, SearchInput, SegmentedControl, Toolbar } from "@paytime/ui";
import { useState } from "react";

export default function Example() {
  const [view, setView] = useState("tabela");
  return (
    <Toolbar search={<SearchInput placeholder="Buscar projeto" aria-label="Buscar projeto" />}>
      <SegmentedControl
        appearance="tabs"
        aria-label="Visão da listagem"
        value={view}
        onValueChange={setView}
        options={[
          { value: "tabela", label: "Tabela" },
          { value: "cartoes", label: "Cartões" },
        ]}
      />
      <FilterButton count={2} />
    </Toolbar>
  );
}