100 lines
4.7 KiB
TypeScript
100 lines
4.7 KiB
TypeScript
"use client";
|
|
import React, { useState } from "react";
|
|
import Link from "next/link";
|
|
import { BlogData } from "@/utils/constant.utils";
|
|
import { useRouter } from "next/navigation";
|
|
import BlogSidebar from "./BlogSidebar";
|
|
|
|
interface BlogDetailsProps {
|
|
blog: any;
|
|
}
|
|
|
|
const BlogDetails = ({ blog }: BlogDetailsProps) => {
|
|
const router = useRouter();
|
|
const [activeIndex, setActiveIndex] = useState<number | null>(null);
|
|
|
|
const toggleAccordion = (index: number) => {
|
|
setActiveIndex(activeIndex === index ? null : index);
|
|
};
|
|
|
|
const handleCategoryClick = (category: string) => {
|
|
router.push(`/blog/results?category=${encodeURIComponent(category)}`);
|
|
};
|
|
|
|
const handleSearch = (term: string) => {
|
|
router.push(`/blog/results?search=${encodeURIComponent(term)}`);
|
|
};
|
|
|
|
return (
|
|
<section className="blog-details-area news-area section-space">
|
|
<div className="container">
|
|
<div className="row">
|
|
<div className="col-lg-4">
|
|
<BlogSidebar
|
|
activeCategory={blog.category}
|
|
onCategoryClick={handleCategoryClick}
|
|
onSearch={handleSearch}
|
|
/>
|
|
</div>
|
|
<div className="col-lg-8">
|
|
<div className="blog-details-content">
|
|
<div className="blog-details-img mb-40">
|
|
<img src={blog.big_image || blog.image} alt={blog.title} className="w-100" />
|
|
</div>
|
|
|
|
<div className="blog-meta mb-30">
|
|
<span><i className="fa-solid fa-user"></i> By Admin</span>
|
|
<span><i className="fa-solid fa-calendar-days"></i> {blog.date}</span>
|
|
<span><i className="fa-solid fa-tag"></i> {blog.category}</span>
|
|
</div>
|
|
|
|
<h2 className="details-title mb-30">{blog.title}</h2>
|
|
|
|
{/* Render the full HTML content from description */}
|
|
<div
|
|
className="details-text"
|
|
dangerouslySetInnerHTML={{ __html: blog.description || '' }}
|
|
/>
|
|
|
|
{blog.faq && blog.faq.length > 0 && (
|
|
<div className="blog-faq-section">
|
|
<div className="sec-title mb-40">
|
|
<div className="sec-title__shape"></div>
|
|
<h6 className="sec-title__tagline">Blog FAQ</h6>
|
|
<h3 className="sec-title__title">Frequently Asked Questions</h3>
|
|
</div>
|
|
<div className="faq-one__accordion pelocis-accrodion">
|
|
{blog.faq.map((item: any, index: number) => (
|
|
<div key={index} className={`accrodion ${activeIndex === index ? 'active' : ''}`}>
|
|
<div className="accrodion-title" onClick={() => toggleAccordion(index)}>
|
|
<div className="accrodion-title__shape"></div>
|
|
<div className="accrodion-title__icon">
|
|
<i className="fa fa-check"></i>
|
|
</div>
|
|
<h4>
|
|
{item.question}
|
|
<i className="icon-right-arrow-white"></i>
|
|
</h4>
|
|
</div>
|
|
<div className="accrodion-content" style={{ display: activeIndex === index ? 'block' : 'none' }}>
|
|
<div className="inner">
|
|
<p>{item.answer}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default BlogDetails;
|