display hrs and minutes

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>

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;

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">