97 lines
No EOL
3 KiB
TypeScript
97 lines
No EOL
3 KiB
TypeScript
// frontend/app/components/LandingPage/ProductGallery.tsx
|
|
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import Image from 'next/image';
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/components/ui/carousel";
|
|
|
|
const images = [
|
|
{
|
|
src: "/products/device1.jpeg",
|
|
alt: "Elato Device - white",
|
|
},
|
|
{
|
|
src: "/products/device2.jpeg",
|
|
alt: "Elato Device - gray",
|
|
},
|
|
{
|
|
src: "/products/device4.jpeg",
|
|
alt: "Elato Device - white",
|
|
},
|
|
{
|
|
src: "/products/device5.jpeg",
|
|
alt: "Elato Device - gray",
|
|
},
|
|
{
|
|
src: "/products/device6.jpeg",
|
|
alt: "Elato Device - black",
|
|
},
|
|
{
|
|
src: "/products/device7.jpeg",
|
|
alt: "Elato Device - white",
|
|
},
|
|
{
|
|
src: "/products/device8.jpeg",
|
|
alt: "Elato Device - gray",
|
|
},
|
|
];
|
|
|
|
export default function ProductGallery() {
|
|
const [selectedImage, setSelectedImage] = useState(images[0]);
|
|
|
|
return (
|
|
<div className="w-full max-w-3xl mx-auto space-y-8 py-8">
|
|
{/* Main Image */}
|
|
<div className="relative w-full h-[400px] rounded-2xl bg-gray-50">
|
|
<Image
|
|
src={selectedImage.src}
|
|
alt={selectedImage.alt}
|
|
fill
|
|
className="object-contain rounded-2xl"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Thumbnail Carousel */}
|
|
<div className="w-full px-8">
|
|
<Carousel
|
|
opts={{
|
|
align: "start",
|
|
loop: true,
|
|
}}
|
|
className="w-full"
|
|
>
|
|
<CarouselContent className="-ml-4">
|
|
{images.map((image, index) => (
|
|
<CarouselItem key={index} className="pl-4 basis-1/5 py-2">
|
|
<div
|
|
className={`relative sm:h-20 h-16 cursor-pointer rounded-lg overflow-hidden ${
|
|
selectedImage.src === image.src
|
|
? 'ring-2 ring-yellow-500'
|
|
: 'hover:opacity-75'
|
|
}`}
|
|
onClick={() => setSelectedImage(image)}
|
|
>
|
|
<Image
|
|
src={image.src}
|
|
alt={image.alt}
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<CarouselPrevious />
|
|
<CarouselNext />
|
|
</Carousel>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |