I'm currently building a recipe and meal planning app for a personal project and I'm struggling on converting this image into react. Sectioning and spacing specifically. How should I approach the sectioning?
I currently have it is that the meals, days of the week, and "breakfast lunch dinner" will have their own divs. Is this the best way of going about it or is there a more effective way?
What i want: https://imgur.com/a/cmsANDp
What I have: https://imgur.com/a/LUHIgot
I created some test cards and gave them this css
.mealplancard{
display:flex;
flex-direction:row;
justify-content:space-evenly;
flex-wrap:wrap;
margin: 20px;
border: 1px solid black; /*so I can see where the div starts and ends*/
border-radius: 25px;
width: 66%;
float: right;
}
Width 66% allows me to have cards per row which is what I need for my meals. My second question is how do I align the Days of the week column to line up evenly with each row of food? Since I'm struggling with divs I'm not sure how to go about this. All relavant code is attached below. I am also getting my recipe info from an API.
const MealPlanCard = ({title, calories, image, ingredients}) => {
const round = Math.round(calories);
return(
<div className>
<div className= "row">
<div className = "card">
<img className = {style.image} src={image} alt=""/>
<h1 >{title}</h1>
</div>
<div className = "column">
<div className = "card">
<img className = {style.image} src={image} alt=""/>
<h1 >{title}</h1>
</div>
</div>
<div className = "card">
<img className = {style.image} src={image} alt=""/>
<h1 >{title}</h1>
</div>
<div className = "card">
<img className = {style.image} src={image} alt=""/>
<h1 >{title}</h1>
</div>
<div className = "card">
<img className = {style.image} src={image} alt=""/>
<h1 >{title}</h1>
</div>
<div className = "card">
<img className = {style.image} src={image} alt=""/>
<h1 >{title}</h1>
</div>
<div className = "card">
<img className = {style.image} src={image} alt=""/>
<h1 >{title}</h1>
</div>
<div className = "card">
<img className = {style.image} src={image} alt=""/>
<h1 >{title}</h1>
</div>
<div className = "card">
<img className = {style.image} src={image} alt=""/>
<h1 >{title}</h1>
</div>
</div>
</div>
)
}
return(
<div className = "App">
<NavigationBar></NavigationBar>
<div className = {style.mealplantext}>
<h1>monday</h1>
<h1>tuesday</h1>
<h1>wednesday</h1>
</div>
<div className = {style.mealplancard}>
{recipes.slice(0, 1).map(recipe =>(
<MealPlanCard
key={recipe.recipe.label}
title ={recipe.recipe.label}
calories={recipe.recipe.calories}
image={recipe.recipe.image}
ingredients={recipe.recipe.ingredients}
/>
))}
</div>
Edit: Bolded the actual questions for clarity