Gseller Tabs Horizontal

Componente para exibir as tabs no modelo horizontal

Props

• options -> OptionsType (um array de objetos que exibe a listagem de opções de tabs e quais componentes irão aparecer conforme a quantidade de tabs)
• className -> string (não obrigatório, para fazer uma possível edição das tabs)

Lembrete

• A alteração das cores não é possível de ser realizada, pois o componente foi pensado para seguir a estrutura e cores do Gseller

Dependências

Certifique-se de ter as seguintes dependências instaladas:

• @radix-ui/react-tabs

Instalação

  yarn add @gseller-monorepo/tabs-horizontal
  or
  npm install @gseller-monorepo/tabs-horizontal
  or
  pnpm add @gseller-monorepo/tabs-horizontal

Estrutura de Pastas e Arquivos

A estrutura do projeto é organizada para facilitar a compreensão e manutenção.

Pasta src

Arquivo tab.tsx

Reponsável por exportar toda a lógica do componente de tabs

Arquivo index.ts

Responsável pela exportação de todos os arquivos necessários para utilização do componente

Pasta types

Arquivo tab.types.ts

Responsável por exportar as tipagens do componente

Arquivo global.css

Arquivo que define os resets e css base para utilização do tailwindcss

Pasta utils

Arquivo index.ts

Possui a função cn que utiliza da biblioteca clsx e tailwind-merge, para que possamos fazer a interpolação de css, utilizando o classname, sem que haja conflito de classes