Tabs e SegmentedControl

Estrutura

Abas trocam de seção; o SegmentedControl troca a visão ou o período do mesmo conteúdo.

Substitui no Brain:ds TabsAbaspartners tabsSegToggleAlternadorDeVisao

Abas

Lista de usuários

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@paytime/ui";

export default function Example() {
  return (
    <Tabs defaultValue="usuarios">
      <TabsList>
        <TabsTrigger value="usuarios">Usuários</TabsTrigger>
        <TabsTrigger value="cargos">Cargos</TabsTrigger>
        <TabsTrigger value="permissoes">Permissões</TabsTrigger>
      </TabsList>
      <TabsContent value="usuarios">Lista de usuários</TabsContent>
      <TabsContent value="cargos">Lista de cargos</TabsContent>
      <TabsContent value="permissoes">Matriz de permissões</TabsContent>
    </Tabs>
  );
}

Abas em pílula

import { Tabs, TabsList, TabsTrigger } from "@paytime/ui";

export default function Example() {
  return (
    <Tabs defaultValue="resumo">
      <TabsList variant="pill">
        <TabsTrigger value="resumo">Resumo</TabsTrigger>
        <TabsTrigger value="detalhe">Detalhe</TabsTrigger>
      </TabsList>
    </Tabs>
  );
}

SegmentedControl

"use client";

import { SegmentedControl } from "@paytime/ui";
import { useState } from "react";

export default function Example() {
  const [period, setPeriod] = useState("mes");
  return (
    <SegmentedControl
      aria-label="Período"
      value={period}
      onValueChange={setPeriod}
      options={[
        { value: "mes", label: "Mês" },
        { value: "90d", label: "90 dias" },
        { value: "ano", label: "Ano" },
      ]}
    />
  );
}

Selector Button (Pill)

"use client";

import { SegmentedControl } from "@paytime/ui";
import { useState } from "react";

export default function Example() {
  const [measure, setMeasure] = useState("quantidade");
  const [period, setPeriod] = useState("mes");
  return (
    <div className="flex flex-col items-start gap-4">
      <SegmentedControl
        appearance="tabs"
        aria-label="Medida"
        value={measure}
        onValueChange={setMeasure}
        options={[
          { value: "quantidade", label: "Quantidade" },
          { value: "valor", label: "Valor (R$)" },
        ]}
      />
      <SegmentedControl
        aria-label="Período"
        value={period}
        onValueChange={setPeriod}
        options={[
          { value: "dia", label: "Dia" },
          { value: "semana", label: "Semana" },
          { value: "mes", label: "Mês" },
          { value: "ano", label: "Ano" },
        ]}
      />
    </div>
  );
}