Gseller Social Media Description

Componente criado para exibir como as redes sociais criadas ficaram no site.

Props

• type -> string (Passado o tipo de rede social que é, como: FACEBOOK, WHATSAPP, INSTAGRAM, etc.)
• value -> string (O valor que será exibido nessa componente para a rede social)

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/title
• @gseller-monorepo/line
• @gseller-monorepo/skeleton

Instalação

  yarn add @gseller-monorepo/social-media-description
  or
  npm install @gseller-monorepo/social-media-description
  or
  pnpm add @gseller-monorepo/social-media-description

Estrutura de Pastas e Arquivos

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

Pasta src

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

Arquivo social-media-description.tsx

Arquivo que exporta toda a lógica do componente

Pasta types

Arquivo com as tipagens usadas no componente

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

Exemplo de uso

export const socialMediasObject: ListOptionsProps[] = [
  {
    id: '1',
    link: '',
    name: 'FACEBOOK',
    title: '',
    icon: <Facebook className="size-5" />
  },
  {
    id: '2',
    link: '',
    name: 'TWITTER',
    title: '',
    icon: <Twitter className="size-5" />
  },
  {
    id: '3',
    link: '',
    name: 'INSTAGRAM',
    title: '',
    icon: <Instagram className="size-5" />
  },
  {
    id: '4',
    link: '',
    name: 'YOUTUBE',
    title: '',
    icon: <Youtube className="size-5" />
  },
  {
    id: '5',
    link: '',
    name: 'LINKEDIN',
    title: '',
    icon: <Linkedin className="size-5" />
  },
  {
    id: '6',
    link: '',
    name: 'WHATSAPP',
    title: '',
    icon: <Smartphone size={20} />
  }
]

{
  socialMedias &&
    socialMedias.getChannelSocialMedia?.items.map(media => (
      <SocialMediaDescription
        key={media.id}
        type={media.nome}
        value={media.title ?? ''}
      />
    ))
}