styling
This commit is contained in:
fred
parent
6f8f03e206
commit
f3f5f232e6
20 changed files with 1351 additions and 193 deletions
0
frontend/src/pages/About.tsx
Normal file
0
frontend/src/pages/About.tsx
Normal file
|
|
@ -43,33 +43,51 @@ function AddRecipe() {
|
|||
}, [newRecipeId, navigate]);
|
||||
|
||||
return (
|
||||
<div className="add-recipe-outer">
|
||||
<div className="add-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">
|
||||
<form onSubmit={addRecipeForm} className="add-recipe-form">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="name"
|
||||
className="recipe-name"
|
||||
className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
value={recipeName}
|
||||
onChange={(e) => setRecipeName(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="cuisine"
|
||||
className="recipe-cusine"
|
||||
className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
value={recipeCuisine}
|
||||
onChange={(e) => setRecipeCuisine(e.target.value)}
|
||||
/>
|
||||
<button type="submit" className="ar-button">
|
||||
<button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
|
||||
submit
|
||||
</button>
|
||||
</form>
|
||||
<label>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showBulkForm}
|
||||
onChange={(e) => setShowBulkForm(e.target.checked)}
|
||||
/>
|
||||
Bulk Entry
|
||||
<label className="mb-4 flex items-center cursor-pointer">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={showBulkForm}
|
||||
onChange={(e) => setShowBulkForm(e.target.checked)}
|
||||
className="sr-only"
|
||||
/>
|
||||
<div className={`
|
||||
w-12 h-6 rounded-full shadow-sm transition-all duration-75 transform
|
||||
${showBulkForm
|
||||
? 'bg-amber-300 shadow-lg'
|
||||
: 'bg-amber-100 hover:bg-amber-200'
|
||||
}
|
||||
`}>
|
||||
<div className={`
|
||||
absolute top-0.5 left-0.5 w-5 h-5 rounded-full shadow-sm transition-all duration-100 transform
|
||||
${showBulkForm
|
||||
? 'translate-x-6 bg-white border-2 border-amber-400'
|
||||
: 'translate-x-0 bg-white border-2 border-amber-200'
|
||||
}
|
||||
`}></div>
|
||||
</div>
|
||||
</div>
|
||||
<span className="ml-3 text-amber-800 font-medium">Bulk Entry</span>
|
||||
</label>
|
||||
<div>
|
||||
{showBulkForm ?
|
||||
|
|
@ -77,22 +95,24 @@ function AddRecipe() {
|
|||
<AddIngredientsForm ingredients={ingredients} onSubmit={setIngredients} />
|
||||
}
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
{ingredients.map((ing, index) => (
|
||||
<li key={index}>{`${ing.quantity} ${ing.unit} ${ing.name}`}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<ul className="mb-4">
|
||||
{ingredients.map((ing, index) => (
|
||||
<li key={index} className="text-gray-700 flex items-start mb-2">
|
||||
<span>{`${ing.quantity} ${ing.unit} ${ing.name}`}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div>
|
||||
{showBulkForm ?
|
||||
<AddBulkSteps steps={steps} onChange={setSteps} /> :
|
||||
<AddStepsForm steps={steps} onSubmit={setSteps} />
|
||||
}
|
||||
</div>
|
||||
<ul>
|
||||
<ul className="mb-4">
|
||||
{steps.map((step) => (
|
||||
<li key={step.idx}>{`${step.idx}. ${step.instructions}`}</li>
|
||||
<li key={step.idx} className="text-gray-700 flex items-start mb-2">
|
||||
<span>{`${step.idx}. ${step.instructions}`}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,16 +38,17 @@ function Cookbook() {
|
|||
|
||||
return (
|
||||
<div className="home">
|
||||
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
|
||||
{loading ? (
|
||||
<div className="loading">Loading...</div>
|
||||
) : (
|
||||
<div className="recipes-grid">
|
||||
{recipes.map((recipe: Recipe) => (
|
||||
<CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
|
||||
))}
|
||||
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
|
||||
<h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold mb-6 text-amber-800">Recipe Index</h1>
|
||||
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
||||
{recipes.map((recipe) => (
|
||||
<CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
72
frontend/src/pages/Search.tsx
Normal file
72
frontend/src/pages/Search.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
|
||||
import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
|
||||
import { type Recipe } from "../types/Recipe"
|
||||
|
||||
|
||||
|
||||
|
||||
function Search() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [recipes, setRecipes] = useState([]);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [shouldFetchRecipes, setShouldFetchRecipes] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const loadRecipes = async () => {
|
||||
try {
|
||||
const recipes = await getRecipes();
|
||||
setRecipes(recipes);
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
setError("Failed to load recipes...");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
if (shouldFetchRecipes) {
|
||||
loadRecipes().then(() => setShouldFetchRecipes(false));
|
||||
}
|
||||
}, [shouldFetchRecipes]);
|
||||
|
||||
const handleDelete = async (id: number | void) => {
|
||||
try {
|
||||
await deleteRecipe(id);
|
||||
setShouldFetchRecipes(true);
|
||||
} catch (error) {
|
||||
console.error("Error deleting recipe:", error);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="add-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">
|
||||
<form onSubmit={() => { }} className="add-recipe-form">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="name"
|
||||
className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
|
||||
submit
|
||||
</button>
|
||||
</form>
|
||||
{error && <div className="error-message">{error}</div>}
|
||||
{loading ? (
|
||||
<div className="loading">Loading...</div>
|
||||
) : (
|
||||
<div className="recipe-outer bg-amber-100 p-4 md:p-8 lg:p-12">
|
||||
<div className="recipes-grid grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
|
||||
{recipes.map((recipe) => (
|
||||
recipe.name.toLowerCase().startsWith(searchQuery) && <CookbookRecipeTile recipe={recipe} key={recipe.id} handleDelete={handleDelete} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Search
|
||||
Loading…
Add table
Add a link
Reference in a new issue