Gseller Tabs

Componente para exibir as tabs, criado exclusivamente para a página de "/config/myshop/"

Props

• options -> OptionsType (um array de objetos que exibe a listagem de opções de tabs)
• components -> ComponentsType (um array de objetos que exibe quais componentes irão aparecer conforme a quantidade de tabs)
• classNameBoxModel -> string (não obrigatório, para fazer uma possível edição da box-model que segura o conteudo)

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:

• @gseller-monorepo/box-model
• @radix-ui/react-tabs

Instalação

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

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