refactor: add category and sub-cagory page for collections

components/category/SubcategoryList.jsx

@@ -0,0 +1,108 @@
+"use client";
+
+import Link from "next/link";
+import React, { useState, useEffect } from "react";
+import { backendUrl } from "@/utils/axios";
+import axios from "axios";
+import Image from "next/image";
+
+export default function SubcategoryList({ params }) {
+  console.log(params);
+  console.log(params.id);
+  const [subcategories, setSubcategories] = useState([]);
+  const [category, setCategory] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        // Fetch category details
+        const categoryResponse = await axios.get(
+          `${backendUrl}/products/category/`
+        );
+        const selectedCategory = categoryResponse.data.find(
+          (cat) => cat.id == params.id
+        );
+        setCategory(selectedCategory);
+
+        // Fetch subcategories for this category
+        const subcategoriesResponse = await axios.get(
+          `${backendUrl}/admins/product/subcategories/?category_id=${params.id}`
+        );
+        setSubcategories(subcategoriesResponse.data);
+        console.log("Selected sub category")
+        console.log(subcategoriesResponse.data);
+        // console.log(sub)
+      } catch (err) {
+        console.error("Error fetching data:", err);
+        setError("Failed to load subcategories. Please try again later.");
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [params.id]);
+
+  if (loading) {
+    return <div className="py-16 text-center">Loading subcategories...</div>;
+  }
+
+  if (error) {
+    return <div className="py-16 text-center text-red-500">{error}</div>;
+  }
+
+  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 {category ? category.category_name : "Category"} Subcategories
+        </h2>
+
+        {subcategories.length === 0 ? (
+          <p className="text-center text-lg">
+            No subcategories available for this category.
+          </p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+            {subcategories.map((subcategory) => (
+              <div
+                key={subcategory.id}
+                className="bg-white shadow-lg rounded-lg overflow-hidden transition-transform transform hover:scale-105"
+              >
+                <Link href={`/category/${params.id}/subcategory/${subcategory.id}`}>
+                  <div className="relative w-full h-64 bg-gray-200">
+                    <Image
+                      src={`${
+                        subcategory?.image
+                          ? subcategory.image.startsWith("http")
+                            ? subcategory.image
+                            : `${backendUrl}/media${
+                                subcategory.image.startsWith("/") ? "" : "/"
+                              }${subcategory.image}`
+                          : "/default-subcategory.jpg"
+                      }`}
+                      alt={subcategory.subcategory_name}
+                      layout="fill"
+                      objectFit="cover"
+                      className="rounded-t-lg"
+                    />
+                  </div>
+                  <div className="p-5">
+                    <h3 className="text-lg font-semibold text-gray-900 mb-2 truncate">
+                      {subcategory.subcategory_name}
+                    </h3>
+                    <p className="text-sm text-gray-600">
+                      Click to view collections
+                    </p>
+                  </div>
+                </Link>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}

components/header/Navbar.jsx

@@ -101,7 +101,7 @@ const Navbar = () => {
   const categoryItems = category
     ? category.map((category) => ({
         label: category.category_name,
-        url: `/collections/${category.id}`,
+        url: `/category/${category.id}`,
       }))
     : []; // Fallback to an empty array if category is undefined
 

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>
+  );
+}

components/subcategory/SubcategoryHero.jsx

@@ -0,0 +1,83 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { backendUrl } from "@/utils/axios";
+import axios from "axios";
+import Image from "next/image";
+import { motion } from "framer-motion";
+
+const cleanHTML = (html) => {
+  if (!html) return "";
+  return html.replace(/style="[^"]*color:[^;]*;?"/gi, "");
+};
+
+const SubcategoryHero = ({ params }) => {
+    const [selectedCategory, setSubcategory] = useState(null);
+
+    useEffect(() => {
+        const fetchSubcategory = async () => {
+          try { 
+            const response = await axios.get(
+              `${backendUrl}/admins/product/subcategory/${params.subCategoryId}`
+            );
+            console.log(response.data)
+            const selectedSubcategory = response.data
+            setSubcategory(selectedSubcategory);
+          } catch (error) {
+            console.error("Error fetching subcategory:", error);
+          }
+        };
+        fetchSubcategory();
+    }, [params.subCategoryId]);
+
+  // Fallback values
+  const fallbackImage = "/placeholder-image.jpg";
+  const fallbackDescription =
+    "Explore our curated collection of spiritual items designed to enhance your journey of self-discovery and inner peace.";
+  const fallbackCategoryName = "Spiritual Essentials";
+
+  return (
+    <section className="relative h-[50vh] md:h-[80vh] flex items-center justify-center overflow-hidden">
+      <div className="absolute inset-0 z-0">
+        <Image
+          src={`${
+            selectedCategory?.image_url
+              ? backendUrl + selectedCategory?.image_url
+              : "/sidhi-mala/Artboard_1_bf5ccd46-7152-4355-82a8-9e9f27c1bfc2.jpg"
+          }`}
+          alt="Category Background"
+          layout="fill"
+          objectFit="cover"
+          quality={100}
+          priority
+          className="brightness-75"
+        />
+      </div>
+
+      <div className="relative z-10 text-center px-6 md:px-12 max-w-3xl">
+        <motion.h1
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-4xl md:text-6xl font-bold text-white mb-4 drop-shadow-lg"
+        >
+          {selectedCategory?.subcategory_name || fallbackCategoryName}
+        </motion.h1>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="text-lg md:text-xl text-gray-200 drop-shadow-md"
+          dangerouslySetInnerHTML={{
+            __html: cleanHTML(
+              selectedCategory?.description || fallbackDescription
+            ),
+          }}
+        />
+      </div>
+    </section>
+  );
+};
+
+export default SubcategoryHero;