refactor: add category and sub-cagory page for collections

2025-05-14 00:51:54 +05:30
parent ffc880f6f8
commit a8f7a7bc14
7 changed files with 304 additions and 2 deletions
--- a/components/category/SubcategoryList.jsx
+++ b/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>
+  );
+}