Vou criar um componente de galeria de imagens que simula a experiência de álbum de fotos do Android/iOS, com uma imagem principal em destaque e um carrossel de thumbnails na parte inferior.
Criei um componente de galeria de fotos que replica a experiência dos álbuns do Android/iOS com as seguintes funcionalidades:
Características principais:
- Imagem principal em destaque - Mostra uma imagem grande com aspect ratio 4:3
- Carrossel de thumbnails - Scrollável horizontalmente na parte inferior
- Navegação por botões - Setas para navegar entre as imagens
- Navegação por thumbnails - Clique nos thumbnails para selecionar
- Contador de imagens - Mostra posição atual (ex: "3 / 6")
- Design responsivo - Adapta-se a diferentes tamanhos de tela
- Indicador visual - Thumbnail selecionado tem destaque com borda
Como usar:
const minhasImagens = [
{
id: "1",
src: "/caminho/para/imagem1.jpg",
alt: "Descrição da imagem 1"
},
// ... mais imagens
]
<PhotoGallery images={minhasImagens} />O componente usa Next.js Image para otimização automática das imagens12 e é totalmente responsivo, funcionando bem tanto em dispositivos móveis quanto desktop.
Agora você tem um projeto completo funcionando! 🎉
O que foi incluído:
Página principal (
app/page.tsx) com:- 8 imagens de exemplo com placeholders
- Header explicativo
- Seção de instruções de uso
- Design com gradiente de fundo
Componente PhotoGallery (
components/photo-gallery.tsx) com:- Imagem principal responsiva
- Navegação por setas com efeitos visuais
- Carrossel de thumbnails scrollável
- Contador de posição
- Indicadores visuais melhorados
- Transições suaves
Funcionalidades:
✅ Navegação por setas - Clique nas setas laterais
✅ Seleção por thumbnails - Clique nos thumbnails
✅ Contador visual - Mostra posição atual
✅ Design responsivo - Funciona em mobile e desktop
✅ Efeitos visuais - Transições e hover effects
✅ Indicador de seleção - Thumbnail ativo destacado
Você pode testar todas as funcionalidades clicando nos controles. Para usar com suas próprias imagens, basta substituir o array sampleImages pelos caminhos das suas fotos!