styling
This commit is contained in:
fred
parent
6f8f03e206
commit
f3f5f232e6
20 changed files with 1351 additions and 193 deletions
1048
frontend/package-lock.json
generated
1048
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -10,6 +10,7 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"autoprefixer": "^10.4.21",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-router-dom": "^7.6.3"
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"globals": "^16.2.0",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.34.1",
|
||||
"vite": "^7.0.0"
|
||||
|
|
|
|||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -1,42 +1,11 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
@apply mx-auto text-center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
page-outer {
|
||||
@apply 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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,21 +2,24 @@ import "./App.css";
|
|||
import Cookbook from "./pages/Cookbook.tsx";
|
||||
import RecipePage from "./pages/RecipePage.tsx";
|
||||
import AddRecipe from "./pages/AddRecipe.tsx";
|
||||
import NavBar from "./components/NavBar.tsx";
|
||||
import Search from "./pages/Search.tsx"
|
||||
|
||||
import RecipeBookTabs from "./components/RecipeBookTabs.tsx";
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<>
|
||||
<NavBar />
|
||||
<main className="main-content">
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<RecipeBookTabs />
|
||||
<main className="flex-1 overflow-auto">
|
||||
<Routes>
|
||||
<Route path="/" element={<Cookbook />} />
|
||||
<Route path="/recipe/:id" element={<RecipePage />} />
|
||||
<Route path="/add-recipe" element={<AddRecipe />} />
|
||||
<Route path="/search" element={<Search />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
export default App;
|
||||
|
|
|
|||
|
|
@ -59,13 +59,13 @@ const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ ingredients, on
|
|||
<div>
|
||||
<p>Please enter ingredients: Quantity, Unit, Name</p>
|
||||
<textarea
|
||||
rows={4}
|
||||
cols={50}
|
||||
rows={8}
|
||||
value={textValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
placeholder="Enter ingredients separated by newline..."
|
||||
className="mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -45,13 +45,13 @@ const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
|
|||
<div>
|
||||
<p>Please enter each step on a new line</p>
|
||||
<textarea
|
||||
rows={4}
|
||||
cols={50}
|
||||
rows={8}
|
||||
value={textValue}
|
||||
onChange={handleInputChange}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={handleBlur}
|
||||
placeholder="Enter ingredients separated by newline..."
|
||||
placeholder="Enter steps separated by newline..."
|
||||
className="mb-4 p-2 border border-gray-300 rounded w-full"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -19,12 +19,15 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
|
|||
|
||||
|
||||
return (
|
||||
<div className="recipe-card">
|
||||
<div className="recipe-info">
|
||||
<h3><a href={`/recipe/${recipe.id}`}>{recipe.name}</a></h3>
|
||||
<button onClick={openModal}>Delete Recipe</button>
|
||||
<div className="recipe-card m-2 bg-amber-300 p-4 rounded shadow">
|
||||
<div className="flex justify-between items-center recipe-name">
|
||||
<h3 className="font-bold"><a href={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</a></h3>
|
||||
<button onClick={openModal} className="text-red-500 focus:outline-none">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Modal
|
||||
isOpen={isModalOpen}
|
||||
onClose={closeModal}
|
||||
|
|
@ -34,6 +37,6 @@ function CookbookRecipeTile({ recipe, handleDelete }: CookbookRecipeTileProps) {
|
|||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default CookbookRecipeTile;
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
import { Link } from "react-router-dom";
|
||||
import "../css/Navbar.css";
|
||||
|
||||
function NavBar() {
|
||||
return (
|
||||
<nav className="navbar">
|
||||
<div className="navbar-links">
|
||||
<Link to="/" className="nav-link">
|
||||
Cookbook
|
||||
</Link>
|
||||
<Link to="/add-recipe" className="nav-link">
|
||||
Add Recipe
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
export default NavBar;
|
||||
66
frontend/src/components/RecipeBookTabs.tsx
Normal file
66
frontend/src/components/RecipeBookTabs.tsx
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
|
||||
const RecipeBookTabs = () => {
|
||||
const location = useLocation();
|
||||
|
||||
const tabs = [
|
||||
{ id: '/', label: 'All Recipes', icon: '📚' },
|
||||
{ id: '/recipe/', label: 'Recipe', icon: '🥗' },
|
||||
{ id: '/search', label: 'Search', icon: '🔎' },
|
||||
{ id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
|
||||
{ id: '/about', label: 'About', icon: '🍽️' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-gradient-to-b from-amber-50 to-orange-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
|
||||
{/* Navigation Tabs */}
|
||||
<div className="relative h-full">
|
||||
{/* Tab Background Line */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
|
||||
|
||||
{/* Tabs Container */}
|
||||
<div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
|
||||
{tabs.map((tab) => {
|
||||
const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tab.id}
|
||||
to={tab.id}
|
||||
className={`
|
||||
relative px-6 py-3 rounded-t-lg font-medium text-sm transform
|
||||
${isActive
|
||||
? 'bg-amber-100 text-amber-800 scale-105 z-10 border-t-2 border-amber-200'
|
||||
: 'bg-amber-200 text-amber-600 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
|
||||
}
|
||||
before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5
|
||||
${isActive ? '' : ''}
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-lg">{tab.icon}</span>
|
||||
<span>{tab.label}</span>
|
||||
</div>
|
||||
|
||||
{/* Tab Shadow Effect */}
|
||||
{isActive && (
|
||||
<>
|
||||
<div className="absolute -left-2 bottom-0 w-2 h-2 bg-white">
|
||||
<div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
|
||||
</div>
|
||||
<div className="absolute -right-2 bottom-0 w-2 h-2 bg-white">
|
||||
<div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default RecipeBookTabs;
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
import { type Recipe, type Ingredient } from "../types/Recipe"
|
||||
|
||||
function RecipeCard({ recipe }: { recipe: Recipe }) {
|
||||
return (
|
||||
<div className="recipe-card">
|
||||
<div className="recipe-info">
|
||||
<h3>{recipe.details.name}</h3>
|
||||
<p>{recipe.details.cuisine}</p>
|
||||
<h4>Ingredients:</h4>
|
||||
<ul>
|
||||
{recipe.ingredients.map((ingredient: Ingredient, index) => (
|
||||
<li key={index}>{ingredient.quantity} {ingredient.unit} {ingredient.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
<h4>Steps:</h4>
|
||||
<ol>
|
||||
{recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
|
||||
<li key={stepNumber}>{recipe.steps?.[parseInt(stepNumber)]}</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RecipeCard;
|
||||
23
frontend/src/components/RecipesContainer.tsx
Normal file
23
frontend/src/components/RecipesContainer.tsx
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import CookbookRecipeTile from "../components/CookbookRecipeTile.tsx"
|
||||
import { useState, useEffect } from "react";
|
||||
import { getRecipes, deleteRecipe } from "../services/frontendApi.js";
|
||||
import { type Recipe } from "../types/Recipe"
|
||||
|
||||
|
||||
|
||||
function RecipesContainer({ recipes }) => {
|
||||
|
||||
return (
|
||||
<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>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
return default RecipesContainer
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
/* font-family: system-ui, Avenir, Helvetica, Arial, sans-serif; */
|
||||
/* line-height: 1.5; */
|
||||
/* font-weight: 400; */
|
||||
/**/
|
||||
/* color-scheme: light dark; */
|
||||
/* color: rgba(255, 255, 255, 0.87); */
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
|
|
@ -13,15 +13,6 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
|
|
@ -29,40 +20,3 @@ body {
|
|||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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
|
||||
12
frontend/tailwind.config.js
Normal file
12
frontend/tailwind.config.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue