fred/recipe_app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

display hrs and minutes

Browse source
This commit is contained in:
fred 2025-08-07 10:36:07 -07:00
parent 91439cbcfa
commit 2da4c0aa12
3 changed files with 31 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/pages/RecipePage.tsx
View file

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