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/subcategory/SubcategoryHero.jsx
+++ b/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;