From 148be1debcc0acdb867dee79fdf37344f645c0da Mon Sep 17 00:00:00 2001
From: Jesse Brault <jbrault@mac.com>
Date: Tue, 17 Feb 2026 21:08:29 -0600
Subject: [PATCH] MME-28 Add prep/cook/total timings to recipe page content.

---
 .../recipe-page-content.css                   | 10 +++++++++
 .../recipe-page-content.html                  | 21 +++++++++++++++++--
 .../recipe-page-content.ts                    |  5 +++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.css b/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.css
index 20bb869..7ee5589 100644
--- a/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.css
+++ b/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.css
@@ -37,6 +37,16 @@ article {
     margin: 0;
 }
 
+.timings-container {
+    display: flex;
+    flex-direction: column;
+    row-gap: 5px;
+}
+
+.timings-container p {
+    margin-block: 0;
+}
+
 .ingredients-list {
     margin: 0;
     padding: 0;
diff --git a/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.html b/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.html
index 4a0f0ed..25400ec 100644
--- a/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.html
+++ b/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.html
@@ -55,6 +55,21 @@
         />
     }
 
+    @if (hasTiming()) {
+        <div class="timings-container">
+            <h3>Timings</h3>
+            @if (recipe.preparationTime) {
+                <p>Preparation time: {{ recipe.preparationTime }} minutes</p>
+            }
+            @if (recipe.cookingTime) {
+                <p>Cooking time: {{ recipe.cookingTime }} minutes</p>
+            }
+            @if (recipe.totalTime) {
+                <p>Total time: {{ recipe.totalTime }} minutes</p>
+            }
+        </div>
+    }
+
     @if (recipe.ingredients?.length) {
         <h3>Ingredients</h3>
         <ul class="ingredients-list">
@@ -72,8 +87,10 @@
         </ul>
     }
 
-    <h3>Instructions</h3>
-    <div [innerHTML]="recipe.text"></div>
+    <div class="content-container">
+        <h3>Instructions</h3>
+        <div [innerHTML]="recipe.text"></div>
+    </div>
 
     <app-recipe-comments-list [recipeUsername]="recipe.owner.username" [recipeSlug]="recipe.slug" />
 </article>
diff --git a/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.ts b/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.ts
index 25653a2..e2ea7f9 100644
--- a/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.ts
+++ b/src/app/pages/recipe-page/recipe-page-content/recipe-page-content.ts
@@ -37,6 +37,11 @@ export class RecipePageContent implements OnInit {
     protected readonly loadMainImageError = signal<Error | null>(null);
     protected readonly mainImage = signal<string | null>(null);
 
+    protected readonly hasTiming = computed(() => {
+        const recipe = this.recipeView().recipe;
+        return !!recipe.preparationTime || !!recipe.cookingTime || !!recipe.totalTime;
+    })
+
     public ngOnInit(): void {
         const recipe = this.recipeView().recipe;
         if (recipe.mainImage) {