93 lines
3.1 KiB
JavaScript
93 lines
3.1 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState, useEffect, useContext } from "react";
|
|
import { backendUrl } from "@/utils/axios";
|
|
import axios from "axios";
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import slugify from "slugify";
|
|
import ProductContext from "@/app/contexts/productContext";
|
|
|
|
const cleanHTML = (html) => {
|
|
if (!html) return "";
|
|
return html.replace(/style="[^"]*color:[^;]*;?"/gi, "");
|
|
};
|
|
|
|
const SubcategoryHero = ({ params }) => {
|
|
const { products, category } = useContext(ProductContext);
|
|
console.log("SubcategoryHero mounted. Params:", params);
|
|
const [selectedSubcategory, setSelectedSubcategory] = useState(null);
|
|
|
|
useEffect(() => {
|
|
if (products?.length > 0) {
|
|
const match = products
|
|
.map((p) => p.product_subcategory)
|
|
.find(
|
|
(sub) =>
|
|
slugify(sub?.subcategory_name || "", { lower: true }) ===
|
|
params.subcategory
|
|
);
|
|
|
|
console.log("Matched from products:", match);
|
|
setSelectedSubcategory(match || null);
|
|
}
|
|
}, [products, params.subcategory]);
|
|
|
|
// Fallbacks
|
|
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 min-h-[50vh] md:h-[80vh] py-8 md:py-0 flex mt-3 justify-center">
|
|
<div className="container mx-auto px-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
|
|
{/* Hero Image */}
|
|
<div className="relative h-[250px] md:h-[500px] overflow-hidden rounded-lg shadow-xl">
|
|
<Image
|
|
src={
|
|
selectedSubcategory?.image
|
|
? `${backendUrl}${selectedSubcategory.image}`
|
|
: fallbackImage
|
|
}
|
|
alt={
|
|
selectedSubcategory?.subcategory_name || "Category Background"
|
|
}
|
|
fill
|
|
style={{ objectFit: "cover" }}
|
|
quality={100}
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Hero Text */}
|
|
<div className="text-start flex justify-start flex-col h-full">
|
|
<motion.h1
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-2xl md:text-3xl font-bold text-black mb-4"
|
|
>
|
|
{selectedSubcategory?.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-black text-sm md:text-base"
|
|
dangerouslySetInnerHTML={{
|
|
__html: cleanHTML(
|
|
selectedSubcategory?.description || fallbackDescription
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default SubcategoryHero; |