162 lines
6.2 KiB
TypeScript
162 lines
6.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import Header1 from "@/components/layout/Header1";
|
|
import Footer1 from "@/components/layout/Footer1";
|
|
import InnerBanner from "@/components/common/InnerBanner";
|
|
import { BlogType } from "@/types";
|
|
import PageHeader from "@/components/common/PageHeader";
|
|
|
|
interface BlogDetailsClientProps {
|
|
blog: BlogType | undefined;
|
|
}
|
|
|
|
export default function BlogDetailsClient({ blog }: BlogDetailsClientProps) {
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined" && (window as any).initMetatron) {
|
|
(window as any).initMetatron();
|
|
}
|
|
}, [blog]);
|
|
|
|
if (!blog) {
|
|
return (
|
|
<>
|
|
<Header1 />
|
|
<div className="section-space text-center">
|
|
<div className="container">
|
|
<h2>Blog Not Found</h2>
|
|
<button onClick={() => router.back()} className="primary-btn-1 mt-20">
|
|
Go Back
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<Footer1 />
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Header1 />
|
|
<main>
|
|
<PageHeader title="Blog Details" />
|
|
|
|
<section className="blog-details-area section-space">
|
|
<div className="container">
|
|
<div className="row justify-content-center">
|
|
<div className="col-lg-10">
|
|
<div className="blog-details-content">
|
|
<div className="blog-details-img mb-40">
|
|
<img src={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>
|
|
|
|
<div className="details-text mb-40">
|
|
<p>{blog.details}</p>
|
|
</div>
|
|
|
|
{blog.blockquote && (
|
|
<blockquote className="blog-blockquote mb-40">
|
|
<div className="quote-icon">
|
|
<i className="fa-solid fa-quote-right"></i>
|
|
</div>
|
|
<p>{blog.blockquote}</p>
|
|
</blockquote>
|
|
)}
|
|
|
|
<div className="details-text mb-60">
|
|
<p>{blog.description}</p>
|
|
</div>
|
|
|
|
<div className="back-btn-wrapper pt-40 border-top">
|
|
<button onClick={() => router.back()} className="primary-btn-5 btn-hover">
|
|
<i className="fa-solid fa-arrow-left"></i> Back to Previous Page
|
|
<span className="btn-hover-span"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer1 />
|
|
|
|
<style jsx>{`
|
|
.blog-details-img img {
|
|
height: 500px;
|
|
object-fit: cover;
|
|
border-radius: 24px;
|
|
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
|
}
|
|
.blog-meta {
|
|
display: flex;
|
|
gap: 30px;
|
|
font-size: 16px;
|
|
color: #64748b;
|
|
font-weight: 600;
|
|
}
|
|
.blog-meta i {
|
|
color: #3779b9;
|
|
margin-right: 8px;
|
|
}
|
|
.details-title {
|
|
font-size: 42px;
|
|
font-weight: 800;
|
|
color: #0f172a;
|
|
line-height: 1.2;
|
|
}
|
|
.details-text p {
|
|
font-size: 18px;
|
|
line-height: 1.8;
|
|
color: #475569;
|
|
}
|
|
.blog-blockquote {
|
|
background: #f8fbff;
|
|
padding: 40px 60px;
|
|
border-left: 5px solid #3779b9;
|
|
border-radius: 0 24px 24px 0;
|
|
position: relative;
|
|
}
|
|
.quote-icon {
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 20px;
|
|
font-size: 40px;
|
|
color: rgba(55, 121, 185, 0.1);
|
|
}
|
|
.blog-blockquote p {
|
|
font-size: 22px;
|
|
font-style: italic;
|
|
font-weight: 700;
|
|
color: #1e293b;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
.border-top {
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
@media (max-width: 991px) {
|
|
.details-title { font-size: 32px; }
|
|
.blog-details-img img { height: 400px; }
|
|
.blog-blockquote { padding: 30px 40px; }
|
|
}
|
|
@media (max-width: 767px) {
|
|
.blog-meta { flex-direction: column; gap: 10px; }
|
|
.blog-details-img img { height: 300px; }
|
|
}
|
|
`}</style>
|
|
</>
|
|
);
|
|
}
|