Tabs

"use client";
 
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@medway-ui/core";
import { House, User, Settings } from "@medway-ui/icons";
import { Badge } from "@medway-ui/core";
 
function StandaloneExample() {
  return (
    <Tabs defaultValue="home" variant="standalone" size="md">
      <TabsList>
        <TabsTrigger value="home" icon={<House />}>
          Home
        </TabsTrigger>
        <TabsTrigger value="profile" icon={<User />}>
          Perfil
        </TabsTrigger>
        <TabsTrigger
          value="settings"
          icon={<Settings />}
          badge={<Badge variant="emphasis">3</Badge>}
        >
          Configurações
        </TabsTrigger>
      </TabsList>
 
      <TabsContent value="home">Conteúdo da Home</TabsContent>
      <TabsContent value="profile">Conteúdo do Perfil</TabsContent>
      <TabsContent value="settings">Conteúdo de Configurações</TabsContent>
    </Tabs>
  );
}

"use client";
 
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@medway-ui/core";
import { Badge } from "@medway-ui/core";
 
function HeaderExample() {
  return (
    <Tabs defaultValue="overview" variant="header" size="lg">
      <TabsList>
        <TabsTrigger value="overview">Visão Geral</TabsTrigger>
        <TabsTrigger value="analytics" badge={<Badge>Novo</Badge>}>
          Analytics
        </TabsTrigger>
        <TabsTrigger value="reports">Relatórios</TabsTrigger>
        <TabsTrigger
          value="notifications"
          badge={<Badge variant="destructive">5</Badge>}
        >
          Notificações
        </TabsTrigger>
      </TabsList>
 
      <TabsContent value="overview">Conteúdo da Visão Geral</TabsContent>
      <TabsContent value="analytics">Conteúdo de Analytics</TabsContent>
      <TabsContent value="reports">Conteúdo de Relatórios</TabsContent>
      <TabsContent value="notifications">Conteúdo de Notificações</TabsContent>
    </Tabs>
  );
}

"use client";
 
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@medway-ui/core";
import { House, User, Settings, Bell } from "@medway-ui/icons";
 
function TabsWithIcons() {
  return (
    <Tabs defaultValue="home" variant="standalone">
      <TabsList>
        <TabsTrigger value="home" icon={<House />}>
          Home
        </TabsTrigger>
        <TabsTrigger value="profile" icon={<User />}>
          Perfil
        </TabsTrigger>
        <TabsTrigger value="settings" icon={<Settings />}>
          Configurações
        </TabsTrigger>
        <TabsTrigger value="notifications" icon={<Bell />}>
          Notificações
        </TabsTrigger>
      </TabsList>
 
      <TabsContent value="home">Conteúdo da Home</TabsContent>
      <TabsContent value="profile">Conteúdo do Perfil</TabsContent>
      <TabsContent value="settings">Conteúdo de Configurações</TabsContent>
      <TabsContent value="notifications">Conteúdo de Notificações</TabsContent>
    </Tabs>
  );
}

"use client";
 
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@medway-ui/core";
import { Badge } from "@medway-ui/core";
 
function TabsWithBadges() {
  return (
    <Tabs defaultValue="inbox" variant="standalone">
      <TabsList>
        <TabsTrigger value="inbox" badge={<Badge variant="emphasis">12</Badge>}>
          Caixa de Entrada
        </TabsTrigger>
        <TabsTrigger value="sent">
          Enviados
        </TabsTrigger>
        <TabsTrigger value="drafts" badge={<Badge variant="warning">3</Badge>}>
          Rascunhos
        </TabsTrigger>
        <TabsTrigger value="spam" badge={<Badge variant="destructive">!</Badge>}>
          Spam
        </TabsTrigger>
      </TabsList>
 
      <TabsContent value="inbox">Mensagens recebidas</TabsContent>
      <TabsContent value="sent">Mensagens enviadas</TabsContent>
      <TabsContent value="drafts">Rascunhos salvos</TabsContent>
      <TabsContent value="spam">Mensagens de spam</TabsContent>
    </Tabs>
  );
}

"use client";
 
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@medway-ui/core";
 
function TabsSizes() {
  return (
    <div className="flex flex-col gap-8">
      {/* Tamanho MD */}
      <div>
        <p className="mb-2 text-sm text-gray-500">Size: md</p>
        <Tabs defaultValue="tab1" variant="standalone" size="md">
          <TabsList>
            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
          </TabsList>
        </Tabs>
      </div>
 
      {/* Tamanho LG */}
      <div>
        <p className="mb-2 text-sm text-gray-500">Size: lg</p>
        <Tabs defaultValue="tab1" variant="standalone" size="lg">
          <TabsList>
            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
          </TabsList>
        </Tabs>
      </div>
    </div>
  );
}

"use client";
 
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@medway-ui/core";
 
function CustomExample() {
  return (
    <Tabs defaultValue="tab1" variant="standalone" size="lg">
      <TabsList className="rounded-xl bg-gray-30 p-2">
        <TabsTrigger value="tab1" className="rounded-lg px-6">
          Tab Customizada
        </TabsTrigger>
        <TabsTrigger value="tab2" className="rounded-lg px-6">
          Outra Tab
        </TabsTrigger>
      </TabsList>
 
      <TabsContent value="tab1" className="rounded-lg bg-gray-50 p-4">
        Conteúdo customizado
      </TabsContent>
      <TabsContent value="tab2" className="rounded-lg bg-gray-50 p-4">
        Outro conteúdo
      </TabsContent>
    </Tabs>
  );
}

"use client";
 
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@medway-ui/core";
 
function NonResponsiveTabs() {
  return (
    <Tabs defaultValue="tab1" variant="standalone" size="lg" responsive={false}>
      <TabsList>
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
 
      <TabsContent value="tab1">Conteúdo 1</TabsContent>
      <TabsContent value="tab2">Conteúdo 2</TabsContent>
      <TabsContent value="tab3">Conteúdo 3</TabsContent>
    </Tabs>
  );
}

"use client";
 
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@medway-ui/core";
import { TrashEmpty  } from "@medway-ui/icons";
 
function TabsWithDisabled() {
  return (
    <Tabs defaultValue="active" variant="standalone">
      <TabsList>
        <TabsTrigger value="active">Ativa</TabsTrigger>
        <TabsTrigger value="pending" disabled>
          Pendente (Desabilitada)
        </TabsTrigger>
        <TabsTrigger value="completed">Concluída</TabsTrigger>
        <TabsTrigger value="archived" disabled icon={<TrashEmpty />}>
          Arquivada
        </TabsTrigger>
      </TabsList>
 
      <TabsContent value="active">Conteúdo das tarefas ativas</TabsContent>
      <TabsContent value="pending">Este conteúdo não pode ser acessado</TabsContent>
      <TabsContent value="completed">Conteúdo das tarefas concluídas</TabsContent>
      <TabsContent value="archived">Este conteúdo não pode ser acessado</TabsContent>
    </Tabs>
  );
}