66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
|
import { useTranslation } from 'react-i18next';
|
|
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
|
|
|
|
interface Props {
|
|
post: {
|
|
id: number;
|
|
title: string;
|
|
excerpt?: string;
|
|
content: string;
|
|
featured_image?: string;
|
|
published_at: string;
|
|
author?: { name: string };
|
|
slug: string;
|
|
};
|
|
}
|
|
|
|
const BlogShow: React.FC<Props> = ({ post }) => {
|
|
const { localizedPath } = useLocalizedRoutes();
|
|
const { t } = useTranslation('blog_show');
|
|
|
|
return (
|
|
<MarketingLayout title={`${post.title} ${t('title_suffix')}`}>
|
|
<Head title={`${post.title} ${t('title_suffix')}`} />
|
|
{/* Hero Section */}
|
|
<section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
|
|
<div className="container mx-auto text-center">
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-4">{post.title}</h1>
|
|
<p className="text-lg mb-8">
|
|
{t('by_author')} {post.author?.name || t('team')} | {t('published_on')} {new Date(post.published_at).toLocaleDateString('de-DE')}
|
|
</p>
|
|
{post.featured_image && (
|
|
<img
|
|
src={post.featured_image}
|
|
alt={post.title}
|
|
className="mx-auto rounded-lg shadow-lg max-w-2xl"
|
|
/>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Post Content */}
|
|
<section className="py-20 px-4 bg-white">
|
|
<div className="container mx-auto max-w-4xl prose prose-lg max-w-none">
|
|
<div dangerouslySetInnerHTML={{ __html: post.content }} />
|
|
</div>
|
|
</section>
|
|
|
|
{/* Back to Blog */}
|
|
<section className="py-10 px-4 bg-gray-50">
|
|
<div className="container mx-auto text-center">
|
|
<Link
|
|
href={localizedPath('/blog')}
|
|
className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-semibold hover:bg-[#FF69B4] transition"
|
|
>
|
|
{t('back_to_blog')}
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
export default BlogShow; |