From 2da4c0aa1260b5fd9731486432adb109831933e3 Mon Sep 17 00:00:00 2001
From: fred <>
Date: Thu, 7 Aug 2025 10:36:07 -0700
Subject: [PATCH] display hrs and minutes

---
 .../src/components/CookbookRecipeTile.tsx     |  3 ++-
 frontend/src/components/TimeDisplay.tsx       | 25 +++++++++++++++++++
 frontend/src/pages/RecipePage.tsx             |  8 +++---
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/TimeDisplay.tsx

diff --git a/frontend/src/components/CookbookRecipeTile.tsx b/frontend/src/components/CookbookRecipeTile.tsx
index c090f26..31a73c3 100644
--- a/frontend/src/components/CookbookRecipeTile.tsx
+++ b/frontend/src/components/CookbookRecipeTile.tsx
@@ -1,6 +1,7 @@
 import { type RecipeSmall } from "../types/Recipe"
 import { Link } from 'react-router-dom';
 import StarRating from '../components/StarRating.tsx'
+import TimeDisplay from "../components/TimeDisplay.tsx"
 
 function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {
 
@@ -13,7 +14,7 @@ function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {
         </div>
       </div>
       <div className="flex justify-between items-center">
-        ⏰ {recipe.prep_minutes + recipe.cook_minutes} min
+        ⏰ <TimeDisplay minutes={recipe.prep_minutes + recipe.cook_minutes} />
         <StarRating rating={recipe.stars} onRatingChange={() => { }} />
       </div>
     </div>
diff --git a/frontend/src/components/TimeDisplay.tsx b/frontend/src/components/TimeDisplay.tsx
new file mode 100644
index 0000000..34c749e
--- /dev/null
+++ b/frontend/src/components/TimeDisplay.tsx
@@ -0,0 +1,25 @@
+interface TimeDisplayProps {
+  minutes: number;
+}
+
+const TimeDisplay = ({ minutes }: TimeDisplayProps) => {
+  let displayText: string;
+
+  if (minutes < 60) {
+    displayText = `${minutes} min`;
+  } else {
+    const hours = Math.floor(minutes / 60);
+    const remainingMinutes = minutes % 60;
+    if (hours > 0 && remainingMinutes > 0) {
+      displayText = `${hours} hr${hours !== 1 ? 's' : ''} ${remainingMinutes} min`;
+    } else if (hours > 0) {
+      displayText = `${hours} hr${hours !== 1 ? 's' : ''}`;
+    } else {
+      displayText = `${remainingMinutes} min`;
+    }
+  }
+
+  return <>{displayText}</>;
+};
+
+export default TimeDisplay;
diff --git a/frontend/src/pages/RecipePage.tsx b/frontend/src/pages/RecipePage.tsx
index dbc92de..bfef52c 100644
--- a/frontend/src/pages/RecipePage.tsx
+++ b/frontend/src/pages/RecipePage.tsx
@@ -1,11 +1,11 @@
 import { useParams, useNavigate, Link } from "react-router-dom";
 import { useState, useEffect } from "react";
-import { getRecipeById, deleteRecipe } from "../services/frontendApi.js";
+import { getRecipeById, deleteRecipe, setDBStars } from "../services/frontendApi.js";
 import { type Recipe, type Ingredient } from "../types/Recipe"
-import StarRating from "../components/StarRating.tsx"
-import { setDBStars } from "../services/frontendApi.js";
 import Modal from '../components/Modal.tsx'
 import DemoModal from '../components/DemoModal.tsx'
+import StarRating from "../components/StarRating.tsx"
+import TimeDisplay from '../components/TimeDisplay.tsx'
 
 function RecipePage() {
   const [recipe, setRecipe] = useState<Recipe>({
@@ -106,7 +106,7 @@ function RecipePage() {
           <div className="border-b-2 border-amber-300 pb-4 mb-6">
             <h3 className="text-2xl lg:text-3xl font-bold text-amber-900 mb-2">{recipe.details.name}</h3>
             <p className="text-amber-700 italic text-lg">{recipe.details.cuisine}</p>
-            <p>prep: {recipe.details.prep_minutes} min | cook: {recipe.details.cook_minutes} min</p>
+            <p>prep: <TimeDisplay minutes={recipe.details.prep_minutes ?? 0} /> | cook: <TimeDisplay minutes={recipe.details.cook_minutes ?? 0} /></p>
           </div>
 
           <div className="grid lg:grid-cols-2 gap-6 mb-6">