56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from 'react';
|
|
import Image from 'next/image';
|
|
|
|
interface ProductGalleryProps {
|
|
image: string;
|
|
name: string;
|
|
images?: string[]; // opcjonalna dodatkowa galeria z contentu, u nas na razie w mocku mamy 1 image
|
|
}
|
|
|
|
export function ProductGallery({ image, name, images }: ProductGalleryProps) {
|
|
const [mainImage, setMainImage] = useState(image || 'https://images.unsplash.com/photo-1581094794329-c8112a89af12?w=800&q=80');
|
|
|
|
// Tworzymy tablicę miniatur, używamy placeholdera jako drugiej by pokazać funkcjonalność
|
|
const gallery = images && images.length > 0
|
|
? images
|
|
: [image, 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=800&q=80'];
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4">
|
|
{/* Główne zdjęcie */}
|
|
<div className="relative aspect-square w-full bg-slate-50 rounded-2xl border border-border overflow-hidden flex items-center justify-center p-8">
|
|
<Image
|
|
src={mainImage}
|
|
alt={name}
|
|
width={800}
|
|
height={800}
|
|
className="object-contain w-full h-full"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Miniatury */}
|
|
{gallery.length > 1 && (
|
|
<div className="flex gap-4 overflow-x-auto pb-2">
|
|
{gallery.map((img, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => setMainImage(img)}
|
|
className={`relative w-24 h-24 shrink-0 rounded-xl border-2 overflow-hidden bg-slate-50 p-2 transition-all ${mainImage === img ? 'border-primary' : 'border-border hover:border-primary/50'}`}
|
|
>
|
|
<Image
|
|
src={img}
|
|
alt={`${name} - miniatura ${idx + 1}`}
|
|
fill
|
|
className="object-contain"
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|