55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import React from 'react'
|
|
import Image from 'next/image'
|
|
import { getNews } from '@/lib/main/fetchNews'
|
|
import { notFound } from 'next/navigation'
|
|
|
|
interface PageProps {
|
|
params: Promise<{
|
|
slug: string
|
|
}>
|
|
}
|
|
|
|
async function getNewsItem(slug: string) {
|
|
const news = await getNews()
|
|
return news.find(item => item.slug === slug)
|
|
}
|
|
|
|
export default async function NewsPage({ params }: PageProps) {
|
|
const { slug } = await params
|
|
const newsItem = await getNewsItem(slug)
|
|
|
|
if (!newsItem) {
|
|
notFound()
|
|
}
|
|
|
|
return (
|
|
<article className="mx-auto max-w-5xl px-4 py-8">
|
|
<div className="w-full overflow-hidden rounded-2xl bg-white shadow-lg">
|
|
<div className="relative h-[400px] w-full">
|
|
<Image
|
|
src={
|
|
newsItem.titleImage.startsWith('http')
|
|
? newsItem.titleImage
|
|
: `http://127.0.0.1:8000${newsItem.titleImage}` || '/placeholder-image.jpg'
|
|
}
|
|
alt={newsItem.title}
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
sizes="(max-width: 1280px) 100vw, 1280px"
|
|
/>
|
|
<div className="absolute inset-0 flex items-center justify-center bg-black/40">
|
|
<h1 className="px-4 text-center text-4xl font-bold text-white md:text-5xl">
|
|
{newsItem.title}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="prose prose-lg mt-8 max-w-none">
|
|
<div className="whitespace-pre-wrap">{newsItem.content}</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|