araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

css finally working rking - yeah!!!

Browse source
This commit is contained in:
Anika Raemer 2025-09-06 22:24:52 +02:00
parent ee8aedd857
commit f1711831f7
1970 changed files with 147377 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

14
frontend/src/components/RecipeDetailView.tsx
View file

@ -16,7 +16,7 @@ export default function RecipeDetailView() {
return (
<div className="p-6 max-w-2xl mx-auto">
<h1 className="text-3xl font-bold mb-4">{recipe.title}</h1>
<h1 className="content-title">{recipe.title}</h1>
{/* Recipe image */}
{recipe.imageUrl && (
@ -28,7 +28,7 @@ export default function RecipeDetailView() {
)}
{/* Ingredients */}
<h2 className="font-semibold">Ingredients</h2>
<h2 className="section-heading">Ingredients</h2>
<ul className="list-disc pl-6">
{recipe.ingredients.map((ing, i) => (
<li key={i}>
@ -38,24 +38,26 @@ export default function RecipeDetailView() {
</ul>
{/* Instructions */}
<h2 className="text-xl font-semibold mb-2">Instructions</h2>
<h2 className="section-heading">Instructions</h2>
<p className="mb-6">{recipe.instructions}</p>
{/* Action buttons */}
<div className="flex gap-4">
<div className="flex gap-8">
<Link
to={`/recipe/${recipe.id}/edit`}
className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600"
className="primary-button"
>
Edit
</Link>
<Link
to="/"
className="bg-gray-300 px-4 py-2 rounded-lg hover:bg-gray-400"
className="default-button"
>
Back
</Link>
</div>
</div>
)
}