chore: setup project for production

2025-02-19 17:00:55 +05:30
commit 12caeee710
271 changed files with 16199 additions and 0 deletions
--- a/components/products/AddToCardLeftSection.jsx
+++ b/components/products/AddToCardLeftSection.jsx
@@ -0,0 +1,94 @@
+"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;