53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { useParams, Navigate } from 'react-router-dom';
|
|
import { useStore } from '../src/context/StoreContext';
|
|
import BlogPostLayout from '../components/BlogPostLayout';
|
|
|
|
const ArticleDetail: React.FC = () => {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const { articles } = useStore();
|
|
|
|
const article = articles.find(a => a.slug === slug);
|
|
|
|
if (!article) {
|
|
// You might want to show a 404 or just redirect back
|
|
return <Navigate to="/editorial" replace />;
|
|
}
|
|
|
|
return (
|
|
<BlogPostLayout
|
|
title={article.title}
|
|
category={article.category || 'Studio Life'}
|
|
date={article.date}
|
|
image={article.image}
|
|
imageAlt={article.title}
|
|
>
|
|
<div className="space-y-12">
|
|
{article.sections && article.sections.length > 0 ? (
|
|
article.sections.map((section: any) => (
|
|
<div key={section.id}>
|
|
{section.type === 'text' ? (
|
|
<p className="mb-6 leading-relaxed text-lg font-light text-stone-600 dark:text-stone-300">
|
|
{section.content}
|
|
</p>
|
|
) : (
|
|
<div className="my-12">
|
|
<img
|
|
src={section.content}
|
|
alt="Article detail"
|
|
className="w-full shadow-lg rounded-sm"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="italic text-stone-400">No content available for this article yet.</p>
|
|
)}
|
|
</div>
|
|
</BlogPostLayout>
|
|
);
|
|
};
|
|
|
|
export default ArticleDetail;
|