117 lines
4.6 KiB
TypeScript
117 lines
4.6 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/mainWebsite';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { Separator } from '@/components/ui/separator';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface Props {
|
|
post: {
|
|
id: number;
|
|
title: string;
|
|
excerpt?: string;
|
|
content: string;
|
|
content_html: 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] py-20 px-4">
|
|
<div className="container mx-auto max-w-4xl">
|
|
<Card className="bg-white/10 backdrop-blur-sm border-white/20 text-white shadow-xl">
|
|
<CardContent className="p-8 text-center">
|
|
<h1 className="text-4xl md:text-5xl font-bold mb-6 leading-tight">{post.title}</h1>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-8 text-lg">
|
|
<Badge variant="secondary" className="bg-white/20 text-white border-white/30">
|
|
{t('by_author')} {post.author?.name || t('team')}
|
|
</Badge>
|
|
<Separator orientation="vertical" className="hidden sm:block h-6 bg-white/30" />
|
|
<Badge variant="secondary" className="bg-white/20 text-white border-white/30">
|
|
{t('published_on')} {new Date(post.published_at).toLocaleDateString('de-DE', {
|
|
day: 'numeric',
|
|
month: 'long',
|
|
year: 'numeric'
|
|
})}
|
|
</Badge>
|
|
</div>
|
|
|
|
{post.featured_image && (
|
|
<div className="mt-8">
|
|
<img
|
|
src={post.featured_image}
|
|
alt={post.title}
|
|
className="mx-auto rounded-lg shadow-lg max-w-2xl w-full object-cover"
|
|
/>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Post Content */}
|
|
<section className="py-20 px-4 bg-white">
|
|
<div className="container mx-auto max-w-4xl">
|
|
<Card className="shadow-sm">
|
|
<CardContent className="p-8 md:p-12">
|
|
<div
|
|
className="prose prose-lg prose-slate max-w-none
|
|
prose-headings:text-slate-900 prose-headings:font-semibold
|
|
prose-p:text-slate-700 prose-p:leading-relaxed
|
|
prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline
|
|
prose-strong:text-slate-900 prose-strong:font-semibold
|
|
prose-code:text-slate-900 prose-code:bg-slate-100 prose-code:px-1 prose-code:py-0.5 prose-code:rounded
|
|
prose-pre:bg-slate-900 prose-pre:text-slate-100
|
|
prose-blockquote:border-l-4 prose-blockquote:border-blue-500 prose-blockquote:pl-6 prose-blockquote:italic
|
|
prose-ul:text-slate-700 prose-ol:text-slate-700
|
|
prose-li:text-slate-700"
|
|
dangerouslySetInnerHTML={{ __html: post.content_html }}
|
|
/>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Back to Blog */}
|
|
<section className="py-10 px-4 bg-gray-50">
|
|
<div className="container mx-auto max-w-4xl">
|
|
<Card className="shadow-sm">
|
|
<CardContent className="p-8 text-center">
|
|
<Separator className="mb-6" />
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-[#FFB6C1] hover:bg-[#FF69B4] text-white px-8 py-3 rounded-full font-semibold transition-colors"
|
|
>
|
|
<Link href={localizedPath('/blog')}>
|
|
{t('back_to_blog')}
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
BlogShow.layout = (page: React.ReactNode) => page;
|
|
|
|
export default BlogShow;
|