refactor: add category and sub-cagory page for collections

components/subcategory/CollectionList.jsx

@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import React, { useContext } from "react";
+import { backendUrl } from "@/utils/axios";
+import Image from "next/image";
+import { useCurrency } from "@/app/contexts/currencyContext";
+import ProductContext from "@/app/contexts/productContext";
+
+export default function ExploreSiddhaMala({ params }) {
+  const { products, category } = useContext(ProductContext);
+  console.log("Products ", products)
+  const { formatPrice, isLoading } = useCurrency();
+
+  const filteredProducts = products?.filter(
+    (product) => product.product_subcategory?.id == params.subCategoryId
+  );
+  console.log(filteredProducts)
+  const selectedCategory = filteredProducts?.length > 0 ? filteredProducts[0].product_subcategory : {"category_name": ""}
+
+  return (
+    <section className="py-16 bg-gray-50">
+      <div className="container mx-auto px-4">
+        <h2 className="text-4xl font-bold text-center text-gray-800 mb-12">
+          Explore{" "}
+          {selectedCategory ? selectedCategory.category_name : "Products"}
+        </h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+          {filteredProducts?.map((product) => (
+            <div
+              key={product.id}
+              className="bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105"
+            >
+              <Link href={`/products/${product.id}`}>
+                <div className="relative w-full h-64 bg-gray-200">
+                  <Image
+                    src={`${backendUrl}${product?.images[0]?.image}`}
+                    alt={product.product_name}
+                    layout="fill"
+                    objectFit="cover"
+                    className="rounded-t-lg"
+                  />
+                </div>
+              </Link>
+              <div className="p-5">
+                <h3 className="text-lg font-semibold text-gray-900 mb-2 truncate">
+                  {product.product_name}
+                </h3>
+                {product.variants?.length > 0 ? (
+                  <p className="text-lg font-bold text-green-600">
+                    {isLoading
+                      ? "Loading..."
+                      : formatPrice(
+                          Math.min(
+                            ...product.variants.map((variant) => variant.price)
+                          )
+                        )}
+                  </p>
+                ) : (
+                  <p className="text-md font-medium text-gray-500">
+                    Price on request
+                  </p>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}