96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
|
import { notFound } from "next/navigation";
|
||
|
|
import Image from "next/image";
|
||
|
|
import newsApi from "@/shared/services/news";
|
||
|
|
import { News } from "@/shared/types/news";
|
||
|
|
import { getFileUrl } from "@/shared/utils/file";
|
||
|
|
import type { Metadata } from "next";
|
||
|
|
|
||
|
|
import NewsContent from "./news-content";
|
||
|
|
|
||
|
|
export async function generateMetadata({
|
||
|
|
params,
|
||
|
|
}: {
|
||
|
|
params: Promise<{ id: string }>;
|
||
|
|
}): Promise<Metadata> {
|
||
|
|
const { id } = await params;
|
||
|
|
try {
|
||
|
|
const newsItem = await newsApi.getNewsById(id, { skipAuth: true });
|
||
|
|
if (!newsItem || !newsItem.is_active) return {};
|
||
|
|
const base = process.env.NEXT_PUBLIC_SITE_URL || "https://example.com";
|
||
|
|
const og = newsItem.thumbnail
|
||
|
|
? getFileUrl(newsItem.thumbnail)
|
||
|
|
: "/og-image.png";
|
||
|
|
return {
|
||
|
|
title: newsItem.name,
|
||
|
|
description: newsItem.description?.replace(/<[^>]*>/g, " ").slice(0, 160),
|
||
|
|
alternates: { canonical: `/news/${id}` },
|
||
|
|
openGraph: {
|
||
|
|
type: "article",
|
||
|
|
url: `${base}/news/${id}`,
|
||
|
|
title: newsItem.name,
|
||
|
|
description: newsItem.description
|
||
|
|
?.replace(/<[^>]*>/g, " ")
|
||
|
|
.slice(0, 200),
|
||
|
|
images: [og],
|
||
|
|
},
|
||
|
|
twitter: {
|
||
|
|
card: "summary_large_image",
|
||
|
|
title: newsItem.name,
|
||
|
|
description: newsItem.description
|
||
|
|
?.replace(/<[^>]*>/g, " ")
|
||
|
|
.slice(0, 200),
|
||
|
|
images: [og],
|
||
|
|
},
|
||
|
|
};
|
||
|
|
} catch {
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
|
|
export default async function NewsPage({ params }: { params: any }) {
|
||
|
|
let newsItem: News | null = null;
|
||
|
|
|
||
|
|
try {
|
||
|
|
newsItem = await newsApi.getNewsById(params.id);
|
||
|
|
} catch (error) {
|
||
|
|
console.error("Gagal mengambil data berita:", error);
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!newsItem || !newsItem.is_active) {
|
||
|
|
notFound();
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<article className="min-h-screen bg-white px-4 py-12 text-gray-800 sm:px-6 lg:px-8">
|
||
|
|
<div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||
|
|
{/* Judul Halaman */}
|
||
|
|
<div className="text-primary mb-6 text-sm font-semibold tracking-wide uppercase">
|
||
|
|
Berita dan Pengumuman
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Judul Berita */}
|
||
|
|
<h1 className="border-primary/30 mb-6 border-b pb-2 text-4xl text-slate-700">
|
||
|
|
{newsItem.name}
|
||
|
|
</h1>
|
||
|
|
|
||
|
|
{/* Gambar Thumbnail */}
|
||
|
|
{newsItem.thumbnail && (
|
||
|
|
<div className="mb-8 flex justify-center overflow-hidden rounded-xl">
|
||
|
|
<Image
|
||
|
|
src={getFileUrl(newsItem.thumbnail)}
|
||
|
|
alt={newsItem.name}
|
||
|
|
width={600}
|
||
|
|
height={600}
|
||
|
|
className="h-auto w-full object-cover transition-all duration-300 hover:scale-105"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* Konten */}
|
||
|
|
<NewsContent description={newsItem.description} />
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
);
|
||
|
|
}
|