77 lines
2.0 KiB
TypeScript
77 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { format } from 'date-fns';
|
|
import Link from 'next/link';
|
|
|
|
interface Post {
|
|
slug: string;
|
|
title: string;
|
|
date: string;
|
|
tags: string[];
|
|
summary: string;
|
|
content: string;
|
|
createdAt: string;
|
|
}
|
|
|
|
export default function PostPage({ params }: { params: { slug: string[] } }) {
|
|
const [post, setPost] = useState<Post | null>(null);
|
|
|
|
// Join the slug array to get the full path
|
|
const slugPath = Array.isArray(params.slug) ? params.slug.join('/') : params.slug;
|
|
|
|
useEffect(() => {
|
|
// Initial load
|
|
loadPost();
|
|
|
|
// Set up polling for changes
|
|
const interval = setInterval(loadPost, 2000);
|
|
|
|
// Cleanup
|
|
return () => clearInterval(interval);
|
|
}, [slugPath]);
|
|
|
|
const loadPost = async () => {
|
|
try {
|
|
const response = await fetch(`/api/posts/${encodeURIComponent(slugPath)}`);
|
|
const data = await response.json();
|
|
setPost(data);
|
|
} catch (error) {
|
|
console.error('Fehler beim Laden des Beitrags:', error);
|
|
}
|
|
};
|
|
|
|
if (!post) {
|
|
return <div>Lädt...</div>;
|
|
}
|
|
|
|
return (
|
|
<article className="min-h-screen p-8 max-w-4xl mx-auto">
|
|
<Link href="/" className="text-blue-600 hover:underline mb-8 inline-block">
|
|
← Zurück zu den Beiträgen
|
|
</Link>
|
|
|
|
<h1 className="text-4xl font-bold mb-4">{post.title}</h1>
|
|
<div className="text-gray-600 mb-8">
|
|
<div>Veröffentlicht: {format(new Date(post.date), 'd. MMMM yyyy')}</div>
|
|
<div>Erstellt: {format(new Date(post.createdAt), 'd. MMMM yyyy HH:mm')}</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 mb-8">
|
|
{post.tags.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm"
|
|
>
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
|
|
<div
|
|
className="prose prose-lg max-w-none"
|
|
dangerouslySetInnerHTML={{ __html: post.content }}
|
|
/>
|
|
</article>
|
|
);
|
|
}
|