Desenvolvedores
src_
components_
ui_
Tabs.jsx

Explicação 💡

Este código cria um conjunto de componentes para abas (tabs) utilizando a biblioteca Radix UI em conjunto com o React. As abas são um padrão de interface que permite exibir diferentes conteúdos sem recarregar a página, proporcionando uma navegação fluida.

No código, são definidos quatro componentes principais:

  • Tabs: O componente raiz para englobar a funcionalidade de abas.
  • TabsList: A lista que contém os gatilhos das abas.
  • TabsTrigger: O gatilho de cada aba individual, que altera o conteúdo visível.
  • TabsContent: O conteúdo que aparece quando uma aba específica é selecionada.

Detalhamento do Código 🧑‍💻

Primeiro, o código importa o necessário para usar o Radix UI e define o componente Tabs como o componente raiz. Ele também importa a função cn para combinar classes CSS dinamicamente, o que facilita a manipulação da estilização dos componentes.

"use client"
 
import * as React from "react"  // Importando o React.
import * as TabsPrimitive from "@radix-ui/react-tabs"  // Importando os componentes de Tabs da Radix UI.
import { cn } from "@/lib/utils"  // Importando a função utilitária para manipulação de classes CSS.

Aqui, a função cn é usada para combinar e aplicar classes CSS dinamicamente aos elementos, permitindo personalização das abas com base nas classes passadas como propriedades.

Agora, definimos o componente TabsList, que é a lista de abas. Ele recebe as classes CSS necessárias para estilizar a lista de abas e as aplica junto com outras propriedades.

const TabsList = React.forwardRef(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground", // Estilos CSS
      className  // Adiciona a classe personalizada se fornecida.
    )}
    {...props}  // Espalha as propriedades recebidas para o componente List.
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

Detalhamento do TabsTrigger 🎯

O TabsTrigger é o gatilho que o usuário clica para mudar a aba ativa. Aqui, usamos um conjunto de classes CSS para garantir que o botão de cada aba tenha uma boa aparência visual e reaja ao estado ativo e inativo.

const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className  // Permite a personalização das classes passadas para o trigger.
    )}
    {...props}  // Espalha as propriedades recebidas para o componente Trigger.
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

Detalhamento do TabsContent 📚

O componente TabsContent define o conteúdo exibido ao selecionar uma aba. Ele é estilizado com classes para adicionar margens, anulações de foco e animações, proporcionando uma transição suave.

const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", // Estilos para o conteúdo.
      className  // Permite a personalização das classes passadas para o conteúdo.
    )}
    {...props}  // Espalha as propriedades recebidas para o componente Content.
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

Código Completo 👨‍💻

"use client"
 
import * as React from "react"  // Importando o React.
import * as TabsPrimitive from "@radix-ui/react-tabs"  // Importando os componentes de Tabs da Radix UI.
import { cn } from "@/lib/utils"  // Importando a função utilitária para manipulação de classes CSS.
 
const Tabs = TabsPrimitive.Root  // Componente raiz de Tabs.
 
const TabsList = React.forwardRef(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",  // Estilos CSS
      className  // Adiciona a classe personalizada se fornecida.
    )}
    {...props}  // Espalha as propriedades recebidas para o componente List.
  />
))
TabsList.displayName = TabsPrimitive.List.displayName
 
const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className  // Permite a personalização das classes passadas para o trigger.
    )}
    {...props}  // Espalha as propriedades recebidas para o componente Trigger.
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",  // Estilos para o conteúdo.
      className  // Permite a personalização das classes passadas para o conteúdo.
    )}
    {...props}  // Espalha as propriedades recebidas para o componente Content.
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName
 
export { Tabs, TabsList, TabsTrigger, TabsContent }  // Exporta os componentes criados.
sonner.jsxTextarea.jsx