MME-28 Add prep/cook/total timings to recipe page content.

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;

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>

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) {