import { Metadata } from 'next'; import Image from 'next/image'; import Link from 'next/link'; import { notFound } from 'next/navigation'; import { ArrowLeft, Clock, Users, ChefHat } from 'lucide-react'; import { RECIPES, RecipesProps, RecipeSection } from '../data'; import { RecipeDetailClient } from './RecipeDetailClient'; // ========================================== // METADATA (UNTUK PREVIEW SOCMED) // ========================================== export async function generateMetadata({ params, }: { params: Promise<{ id: string }>; }): Promise { const { id } = await params; const recipe = RECIPES.find((r) => r.id === Number(id)); if (!recipe) { return { title: 'Resep Tidak Ditemukan | Garam Cap Kapal', }; } return { title: recipe.title, description: recipe.description, openGraph: { title: `${recipe.title} | Resep Garam Cap Kapal`, description: recipe.description, url: `/recipes/${id}`, type: 'article', images: [ { url: recipe.imageBanner, width: 1200, height: 630, alt: `Resep ${recipe.title}`, }, ], }, twitter: { card: 'summary_large_image', title: `${recipe.title} | Resep Garam Cap Kapal`, description: recipe.description, images: [recipe.imageBanner], }, }; } // ========================================== // KUMPULAN SUB-KOMPONEN // ========================================== const BackButton = () => ( Kembali ke Resep ); const RecipeHeader = ({ recipe }: { recipe: RecipesProps }) => (
{/* Latar Belakang Halus */}
Mascot Background
{recipe.category}

{recipe.title}

{recipe.description}

{/* Meta Stats */}
} label="Waktu" value={recipe.time} color="yellow" /> } label="Porsi" value={recipe.serving || '-'} color="yellow" />
{/* Info Kreator (Author) */}
Chef Mascot

Resep Oleh

{recipe.author}

); const RecipeStat = ({ icon, label, value, color, }: { icon: React.ReactNode; label: string; value: string; color: 'yellow' | 'yellow'; }) => { const bgColors = color === 'yellow' ? 'bg-yellow-100 text-yellow-600' : 'bg-yellow-100 text-yellow-600'; return (
{icon}

{label}

{value}

); }; const RecipeMainImage = ({ src, title }: { src: string; title: string }) => (
{`Ilustrasi {/* Gradasi lembut agar gambar tidak terlalu flat */}
); const RecipeIngredients = ({ ingredients, }: { ingredients: RecipeSection[]; }) => ( ); const RecipeInstructions = ({ instructions, }: { instructions: RecipeSection[]; }) => (

Langkah Pembuatan

{instructions.map((section, idx) => (
{section.title !== 'CARA MEMBUAT' && (

{section.title}

)}
{section.items.map((item, itemIdx) => (
{itemIdx + 1}
{/* Desain garis bawah tipis untuk memisahkan setiap langkah agar mudah dipindai mata */}

{item}

))}
))}
); // ========================================== // KOMPONEN HALAMAN UTAMA // ========================================== export default async function RecipeDetailPage({ params, }: { params: Promise<{ id: string }>; }) { const { id } = await params; const recipe = RECIPES.find((r) => r.id === Number(id)); if (!recipe) { notFound(); } return (
{/* Ornamen Background */}
); }