araemer/recipe-app
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

add search bar and add button to header - no functionality yet!

Browse source
This commit is contained in:
Anika Raemer 2025-09-13 09:43:09 +02:00
parent a50497426b
commit 5726bdb154
1 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/components/recipes/RecipeListPage.tsx
View file

@ -25,19 +25,27 @@ export default function RecipeListPage() {
loadRecipeList() loadRecipeList()
}, []) }, [])
if(!recipeList) { return <div>Unable to load recipes1</div>} if(!recipeList) { return <div>Unable to load recipes!</div>}
return ( return (
/*Contaier spanning entire screen used to center content horizontally */ /*Contaier spanning entire screen used to center content horizontally */
<div className="w-screen min-h-screen flex justify-center"> <div className="w-screen min-h-screen flex justify-center">
{/* Container defining the maximum width of the content */} {/* Container defining the maximum width of the content */}
<div className="bg-gray-100 w-full min-h-screen max-w-5xl shadow-xl p-8"> <div className="bg-gray-100 w-full min-h-screen max-w-5xl shadow-xl p-8">
{/* Header - remains in position when scrolling */} {/* Header - remains in position when scrolling */}
<div className="sticky bg-gray-100 top-0 left-0 right-0 mb-4"> <div className="sticky bg-gray-100 top-0 left-0 right-0 pb-4 border-b-2 border-gray-300">
<h1 className="content-title text-blue-900">Recipes</h1> <h1 className="content-title text-blue-900">Recipes</h1>
<label>{recipeList.length} Recipes</label> <div className="flex columns-4 content-stretch gap-2 items-center">
<label className="text-gray-500 w-2/3">{recipeList.length} Recipes</label>
<input className="input-field"
placeholder="Search"
></input>
<button className="primary-button">
Add recipe
</button>
</div>
</div> </div>
{/*Content - List of recipe cards */} {/*Content - List of recipe cards */}
<div className="grid gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]"> <div className="grid pt-4 gap-6 grid-cols-[repeat(auto-fit,minmax(220px,1fr))]">
{recipeList.map((recipe) => ( {recipeList.map((recipe) => (
<RecipeListItem <RecipeListItem
key={recipe.id} key={recipe.id}