64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
import { useParams, Link } from "react-router-dom"
|
|
import { recipes } from "../mock_data/recipes"
|
|
|
|
/**
|
|
* Displays the full detail of a single recipe,
|
|
* including its ingredients, instructions, and image.
|
|
*/
|
|
export default function RecipeDetailView() {
|
|
// Extract recipe ID from route params
|
|
const { id } = useParams<{ id: string }>()
|
|
const recipe = recipes.find((r) => r.id === id)
|
|
|
|
if (!recipe) {
|
|
return <p className="p-6">Recipe not found.</p>
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 max-w-2xl mx-auto">
|
|
<h1 className="content-title">{recipe.title}</h1>
|
|
|
|
{/* Recipe image */}
|
|
{recipe.imageUrl && (
|
|
<img
|
|
src={recipe.imageUrl}
|
|
alt={recipe.title}
|
|
className="w-full rounded-xl mb-4"
|
|
/>
|
|
)}
|
|
|
|
{/* Ingredients */}
|
|
<h2 className="section-heading">Zutaten</h2>
|
|
<p>For {recipe.servings.amount} {recipe.servings.unit}</p>
|
|
<ul className="default-list-item">
|
|
{recipe.ingredients.map((ing, i) => (
|
|
<li key={i}>
|
|
{ing.amount} {ing.unit ?? ""} {ing.name}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Instructions */}
|
|
<h2 className="section-heading">Zubereitung</h2>
|
|
<p className="mb-6">{recipe.instructions}</p>
|
|
|
|
{/* Action buttons */}
|
|
<div className="button-group">
|
|
<Link
|
|
to={`/recipe/${recipe.id}/edit`}
|
|
className="primary-button"
|
|
>
|
|
Bearbeiten
|
|
</Link>
|
|
<Link
|
|
to="/"
|
|
className="default-button"
|
|
>
|
|
Zurueck
|
|
</Link>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
}
|