95 lines
3.2 KiB
JavaScript
95 lines
3.2 KiB
JavaScript
"use client";
|
|
import React, { useContext, useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card } from "@/components/ui/card";
|
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
import ProductContext from "@/app/contexts/productContext";
|
|
import { backendUrl } from "@/utils/axios";
|
|
import Image from "next/image";
|
|
|
|
const ProductGallery = ({ productId }) => {
|
|
const { products } = useContext(ProductContext);
|
|
|
|
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
|
|
|
const nextImage = () => {
|
|
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % productImages.length);
|
|
};
|
|
|
|
const prevImage = () => {
|
|
setCurrentImageIndex(
|
|
(prevIndex) =>
|
|
(prevIndex - 1 + productImages.length) % productImages.length
|
|
);
|
|
};
|
|
const product = products?.find((pr) => pr.id == productId);
|
|
if (!product) {
|
|
return null;
|
|
}
|
|
const productImages = product?.images?.map((img) => img.image) || [];
|
|
|
|
return (
|
|
<div className="flex flex-col md:flex-row gap-4 p-4 sm:w-[70%] ">
|
|
<div className="hidden md:flex flex-col gap-2">
|
|
{productImages?.map((src, index) => (
|
|
<Image
|
|
key={index}
|
|
src={`${backendUrl}${src}`}
|
|
alt={`Thumbnail ${index + 1}`}
|
|
width={160} // Width of w-40 (160px)
|
|
height={128} // Height of h-32 (128px)
|
|
className="object-cover cursor-pointer border border-gray-300 hover:border-blue-500"
|
|
onClick={() => setCurrentImageIndex(index)}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="flex-grow h-full">
|
|
<Card className="p-4 h-[380px] sm:h-[80vh]">
|
|
{/* Main image with carousel controls */}
|
|
<div className="relative mb-4 h-full">
|
|
<Image
|
|
src={`${backendUrl}${productImages[currentImageIndex]}`}
|
|
alt="Main product"
|
|
width={500}
|
|
height={500}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
<Button
|
|
className="absolute top-1/2 left-2 transform -translate-y-1/2 md:hidden"
|
|
onClick={prevImage}
|
|
variant="ghost"
|
|
>
|
|
<ChevronLeft />
|
|
</Button>
|
|
<Button
|
|
className="absolute top-1/2 right-2 transform -translate-y-1/2 md:hidden"
|
|
onClick={nextImage}
|
|
variant="ghost"
|
|
>
|
|
<ChevronRight />
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
<div className="my-6">
|
|
<div className="flex gap-3">
|
|
<h3 className="p-1 px-2 rounded-3xl border text-xs border-yellow-700">
|
|
A+ Grade
|
|
</h3>
|
|
<h3 className="p-1 px-2 rounded-3xl border text-xs border-yellow-700">
|
|
IRL Certified
|
|
</h3>
|
|
<h3 className="p-1 px-2 rounded-3xl border text-xs border-yellow-700">
|
|
Expert Rating
|
|
</h3>
|
|
</div>
|
|
<h2 className="mt-3">Note: Free Shipping on order above $ 300</h2>
|
|
<h2 className="my-1">100% Secured Payment</h2>
|
|
<h2>Authenticity Guaranteed</h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ProductGallery;
|