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

styling

Browse source
This commit is contained in:
fred 2025-07-11 17:06:41 -07:00
parent 6f8f03e206
commit f3f5f232e6
20 changed files with 1351 additions and 193 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,7 @@
import RecipeCard from "../components/RecipeCard.tsx"
import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import { getRecipeById } from "../services/frontendApi.js";
import { type Recipe } from "../types/Recipe"
import { type Recipe, type Ingredient } from "../types/Recipe"
function RecipePage() {
const [recipe, setRecipe] = useState<Recipe>({
@ -29,7 +28,7 @@ function RecipePage() {
};
loadRecipe();
}, [id]);
console.log(recipe)
return (
<div className="recipe">
@ -38,8 +37,53 @@ function RecipePage() {
{loading ? (
<div className="loading">Loading...</div>
) : (
<div className="recipe-card">
<RecipeCard recipe={recipe} key={recipe.details.id} />
<div className="recipe-card bg-amber-100 border border-amber-200 rounded-bl-lg rounded-br-lg p-6 md:p-8 lg:p-10 max-w-6xl mx-auto font-serif">
<div className="border-b-2 border-amber-300 pb-4 mb-6">
<h3 className="text-2xl md: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>
</div>
<div className="grid md:grid-cols-2 gap-6 mb-6">
<div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
<h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
<span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
Ingredients:
</h4>
<ul className="space-y-2">
{recipe.ingredients.map((ingredient: Ingredient, index) => (
<li key={index} className="text-gray-700 flex items-start">
<span className="w-1.5 h-1.5 bg-amber-400 rounded-full mt-2 mr-3 flex-shrink-0"></span>
<span className="font-medium">{ingredient.quantity} {ingredient.unit} {ingredient.name}</span>
</li>
))}
</ul>
</div>
<div className="bg-white rounded-lg p-4 shadow-sm border border-amber-100">
<h4 className="text-xl font-semibold text-amber-800 mb-3 flex items-center">
<span className="w-2 h-2 bg-amber-500 rounded-full mr-2"></span>
Instructions:
</h4>
<ol className="space-y-3">
{recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
<li key={stepNumber} className="text-gray-700 flex items-start">
<span className="bg-amber-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-sm font-bold mr-3 mt-0.5 flex-shrink-0">
{stepNumber}
</span>
<span className="leading-relaxed">{recipe.steps[parseInt(stepNumber)]}</span>
</li>
))}
</ol>
</div>
</div>
<div className="border-t-2 border-amber-300 pt-4">
<div className="flex justify-between items-center text-sm text-amber-600">
<span>From the Kitchen of</span>
<span>★ ★ ★</span>
</div>
</div>
</div>
)}
</div>