@gseller-monorepo/photo-view v0.0.2

Gseller Photo View

Componente criado para exibir imagens ou vídeos com a possibilidade de incluir um título e conteúdo personalizado abaixo da mídia. Suporta a visualização de imagens ou a reprodução de vídeos com controles básicos.

Props

• title -> String, Título opcional para ser exibido baixo da mídia.
• url -> String, URL da imagem ou vídeo a ser exibido. Se não fornecido, um placeholder é mostrado.
• children -> Componente, Conteúdo personalizado a ser exibido abaixo da mídia.
• isVideo -> Booleano, Determina se a mídia é um vídeo. Se verdadeiro, um player de vídeo é renderizado. Padrão: false.

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
• @gseller-monorepo/title
• lucide
• react
• react-dom
• tailwindcss
• tailwind-merge

Instalação

  yarn add @gseller-monorepo/photo-view
  or
  npm install @gseller-monorepo/photo-view
  or
  pnpm add @gseller-monorepo/photo-view

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 photo-view.tsx

Arquivo que exporta toda a lógica do componente

Exemplo de Uso

import { PhotoView } from '@gseller-monorepo/photo-view'

const App = () => {
  return (
    <PhotoView
      title="Imagem do Produto"
      url="https://example.com/image.jpg"
      isVideo={false}
    >
      <div>
        <button>Botão adicional embaixo da imagem ou vídeo.</button>
        <button>Botão adicional embaixo da imagem ou vídeo.</button>
        <button>Botão adicional embaixo da imagem ou vídeo.</button>
        <button>Botão adicional embaixo da imagem ou vídeo.</button>
      </div>
    </PhotoView>
  )
}