59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { useMemo } from 'react';
|
|
import Link from 'next/link';
|
|
import { useParams } from 'next/navigation';
|
|
import { AnnouncementBar } from '@/layout/AnnouncementBar';
|
|
import { Header } from '@/layout/Header';
|
|
import { Navbar } from '@/layout/Navbar';
|
|
import { Footer } from '@/layout/Footer';
|
|
import { StickyHeaderSpacer } from '@/components/StickyHeaderSpacer';
|
|
import { FloatingButtons } from '@/components/FloatingButtons';
|
|
import { BlogArticleView } from '@/components/blog/BlogViews';
|
|
import { DEMO_BLOG_ARTICLES, findBlogArticle } from '@/lib/blogDefaults';
|
|
|
|
export default function BlogArticlePage() {
|
|
const params = useParams<{ slug: string }>();
|
|
const slug = String(params?.slug || '');
|
|
const article = useMemo(
|
|
() => findBlogArticle(DEMO_BLOG_ARTICLES, slug),
|
|
[slug]
|
|
);
|
|
const related = useMemo(() => {
|
|
if (!article) return [];
|
|
return DEMO_BLOG_ARTICLES.filter(
|
|
(a) => a.slug !== article.slug && a.category === article.category
|
|
).slice(0, 2);
|
|
}, [article]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F9FB] text-[#1E293B] flex flex-col font-sans">
|
|
<AnnouncementBar />
|
|
<Header />
|
|
<StickyHeaderSpacer />
|
|
<Navbar />
|
|
<main className="flex-grow py-10 pb-20">
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-[1400px]">
|
|
{article ? (
|
|
<BlogArticleView article={article} related={related} />
|
|
) : (
|
|
<div className="bg-white border border-gray-200 rounded-2xl p-10 text-center max-w-lg mx-auto">
|
|
<h1 className="text-lg font-bold text-[#1E293B]">Article not found</h1>
|
|
<p className="text-[13px] text-gray-500 mt-2 mb-6">
|
|
This story is missing or no longer published.
|
|
</p>
|
|
<Link
|
|
href="/blog"
|
|
className="inline-flex items-center justify-center h-10 px-5 rounded-lg bg-primary text-white text-[13px] font-semibold"
|
|
>
|
|
Back to News & Blog
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</main>
|
|
<Footer />
|
|
<FloatingButtons />
|
|
</div>
|
|
);
|
|
}
|