83 lines
2.6 KiB
JavaScript
83 lines
2.6 KiB
JavaScript
"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
|
|
/>
|
|
</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;
|