Skip to content
Snippets Groups Projects
Commit 1c66f694 authored by zh393's avatar zh393
Browse files

prettier links and added missing ingredients to recipes page. Recipes heading is also centered

parent d0eb655d
No related branches found
No related tags found
No related merge requests found
......@@ -6,6 +6,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
<link rel="icon" type="image/png" href="./images/fridge.png"/>
<title>What's in Your Fridge?</title>
......
......@@ -36,26 +36,50 @@ function Results() {
}, []) // eslint-disable-line react-hooks/exhaustive-deps
const recipeComponent = recipes.map(recipe =>
<div style={{marginBottom: "60px"}}>
<Link to={"/recipe/" + recipe.id} key={recipe.id}>
<div
style={{
marginBottom: "60px",
padding: "20px",
}}
>
<Link
to={"/recipe/" + recipe.id}
style = {{
color: "black",
textDecoration: "none",
fontFamily: "Exo, sans-serif",
}}
key={recipe.id}>
<img
src={`https://spoonacular.com/recipeImages/${recipe.id}-636x393.${recipe.imageType}`}
alt="recipe"
style={{
borderRadius: '1.5%',
borderRadius: '15px',
width: "312px",
height: "231px"
}}
/>
<Typography
variant="h5"
variant="h3"
key={recipe.id}
sx={{
mb: 2,
fontSize: '1rem',
fontWeight: "bold",
}}
>
{recipe.title.length > 50 ? recipe.title.slice(0, 50) + "..." : recipe.title}
</Typography>
<Typography
variant="p"
key={recipe.id}
sx = {{
mb: 2
color: "#878282",
}}
>
{recipe.title.length > 20 ? recipe.title.slice(0, 20) + "..." : recipe.title}
Missing Ingredients: {recipe.missedIngredients.map(ingredient => ingredient.name).join(", ")}
</Typography>
</Link>
</div>
)
......@@ -66,7 +90,8 @@ function Results() {
variant="h2"
sx={{
mt: 13,
mb: 10
mb: 10,
textAlign: "center"
}}
>
Recipes
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment