Skip to content

Commit aa7cac4

Browse files
nooobcodernooobcoder
committed
Developed Skeleton layout for the recipe cards
1 parent ec40d0b commit aa7cac4

File tree

6 files changed

+129
-2
lines changed

6 files changed

+129
-2
lines changed

‎RecipeFinder/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
"private": true,
55
"dependencies": {
66
"@reduxjs/toolkit": "^1.6.0",
7+
"font-awesome": "^4.7.0",
78
"react": "^17.0.2",
89
"react-dom": "^17.0.2",
910
"react-redux": "^7.2.4",

‎RecipeFinder/src/App.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import "./App.css";
22
import Header from "./components/Header";
3+
import RecipeCard from "./components/RecipeCard";
34

45
function App() {
56
return (
67
<div className="App">
78
<Header />
9+
<RecipeCard />
810
</div>
911
);
1012
}

‎RecipeFinder/src/components/RecipeCard.jsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import styles from "../styles/RecipeCard.module.css";
2+
import "../../node_modules/font-awesome/css/font-awesome.css";
3+
import { useState } from "react";
4+
5+
const RecipeCard = () => {
6+
const [isFavorite, toggleFavorite] = useState(false);
7+
8+
return (
9+
<div className={styles.recipe_card}>
10+
<div className={styles.heading_container}>
11+
<h3>Mediterranean Pasta Salad</h3>
12+
13+
<i
14+
className={"fa fa-heart ".concat(`${isFavorite ? styles.red : ""}`)}
15+
onClick={() => toggleFavorite((prevState) => !prevState)}
16+
></i>
17+
</div>
18+
<div className={styles.recipe_container}>
19+
<img
20+
src="https://www.themealdb.com/images/media/meals/qtqvys1468573168.jpg"
21+
alt="food_image"
22+
/>
23+
<div className={styles.recipe_meta}>
24+
<div className={styles.div1}>
25+
<span className={styles.italic}>Category of Meal</span> - Chicken
26+
</div>
27+
<div className={styles.div2}>
28+
<span className={styles.italic}>Area of the meal</span> - Italian
29+
</div>
30+
<br />
31+
<div className={styles.div3}>
32+
<span className={styles.italic}>Ingredients</span>
33+
<ul className={styles.ingredients_list}>
34+
<li>This is item1 - qty</li>
35+
<li>This is item1 - qty</li>
36+
<li>This is item1 - qty</li>
37+
<li>This is item1 - qty</li>
38+
<li>This is item1 - qty</li>
39+
<li>This is item1 - qty</li>
40+
<li>This is item1 - qty</li>
41+
<li>This is item1 - qty</li>
42+
<li>This is item1 - qty</li>
43+
</ul>
44+
</div>
45+
<div className={styles.div4}>
46+
<span className={styles.italic}>
47+
<center> Recipes</center>
48+
</span>
49+
<p
50+
className={styles.ingredients_list}
51+
>{`Preheat the oven at 180 C / Gas 4. Line a baking tray with greaseproof paper.\r\nIn a bowl, mix the cashews and icing sugar. Add the egg yolks and orange blossom water and mix to a smooth homogeneous paste.\r\nTake lumps of the cashew paste and shape into small balls. Roll the balls in icing sugar and transfer to the baking tray. Push an almond in the centre of each ghribia.\r\nBake until the biscuits are lightly golden, about 20 minutes. Keep an eye on them, they burn quickly.`}</p>
52+
</div>
53+
</div>
54+
</div>
55+
</div>
56+
);
57+
};
58+
59+
export default RecipeCard;

‎RecipeFinder/src/store/searchSlice.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createSlice } from "@reduxjs/toolkit";
22

3-
const initialState = { searchResult: null };
3+
const initialState = { meals: null };
44

55
const searchSlice = createSlice({
66
name: "search",
@@ -9,7 +9,7 @@ const searchSlice = createSlice({
99
setSearchResult: (prevState, { payload }) => {
1010
return {
1111
...prevState,
12-
searchResult: payload,
12+
meals: payload,
1313
};
1414
},
1515
},

‎RecipeFinder/src/styles/RecipeCard.module.css

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
.recipe_card {
2+
margin: auto;
3+
background-color: #d9d8ec;
4+
width: 60%;
5+
}
6+
7+
.heading_container {
8+
background-color: #f8eed4;
9+
display: flex;
10+
position: relative;
11+
flex-direction: row;
12+
justify-content: center;
13+
align-items: center;
14+
}
15+
16+
.heading_container > i {
17+
position: absolute;
18+
cursor: pointer;
19+
right: 10px;
20+
}
21+
22+
.recipe_container {
23+
padding: 2em 3em;
24+
}
25+
.recipe_container {
26+
display: flex;
27+
justify-content: stretch;
28+
}
29+
30+
.recipe_meta {
31+
display: flex;
32+
flex: 1;
33+
flex-direction: column;
34+
justify-content: flex-start;
35+
text-align: left;
36+
}
37+
38+
img {
39+
/* width: 30%; */
40+
max-width: 15rem;
41+
max-height: 15rem;
42+
display: block;
43+
border: 3px solid black;
44+
margin: 2em 3em;
45+
}
46+
47+
.red {
48+
color: #cf193a;
49+
}
50+
51+
.italic {
52+
font-style: italic;
53+
}
54+
.ingredients_list {
55+
background-color: #d7d0d0;
56+
list-style: none;
57+
max-height: 15vh;
58+
padding: 20px 18px;
59+
overflow: auto;
60+
}

‎RecipeFinder/yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5067,6 +5067,11 @@ follow-redirects@^1.0.0:
50675067
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147"
50685068
integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
50695069

5070+
font-awesome@^4.7.0:
5071+
version "4.7.0"
5072+
resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
5073+
integrity sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=
5074+
50705075
for-in@^1.0.2:
50715076
version "1.0.2"
50725077
resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"

0 commit comments

Comments
 (0)