Gseller Profile User

Componente criado para exibir a foto da loja do usuário

Props

• preview -> string (src para a imagem)
• alt-> string (explicação da imagem caso ela não aparecerá, ajudando na acessibilidade)
• children -> ReactNode (não obrigatório, botão para abrir a edição da foto)
• isLoading -> boolean (não obrigatório, exibir um skeleton)

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

Instalação

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

Estrutura de Pastas e Arquivos

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

Pasta src

Arquivo profile.tsx

Responsável por exportar a lógica do componente

Arquivo index.ts

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

Arquivo global.css

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

Pasta types

Arquivo profile.type.ts

Arquivo existente para exportar as tipagens usadas no componente profile.tsx

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