From 84a2cc7bddf6916213e95799adde869556e4865e Mon Sep 17 00:00:00 2001
From: oscar <oscarzhou0727@icloud.com>
Date: Sat, 18 Mar 2023 11:52:06 +1300
Subject: [PATCH] add meals components

---
 src/App.js                                    | 22 +++++-----
 src/components/Meals/AvailableMeals.js        | 40 +++++++++++++++++++
 .../Meals/AvailableMeals.module.css           | 24 +++++++++++
 src/components/Meals/Meals.js                 | 13 ++++++
 src/components/Meals/MealsSummary.js          | 19 +++++++++
 src/components/Meals/MealsSummary.module.css  | 18 +++++++++
 6 files changed, 127 insertions(+), 9 deletions(-)
 create mode 100644 src/components/Meals/AvailableMeals.js
 create mode 100644 src/components/Meals/AvailableMeals.module.css
 create mode 100644 src/components/Meals/Meals.js
 create mode 100644 src/components/Meals/MealsSummary.js
 create mode 100644 src/components/Meals/MealsSummary.module.css

diff --git a/src/App.js b/src/App.js
index cca1714..08d0a73 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,17 @@
-import React from 'react';
+import React from "react";
 
-import Header from './components/Layout/Header';
+import Header from "./components/Layout/Header";
+import Meals from "./components/Meals/Meals";
 
 const App = () => {
-    return (
-        <>
-            <Header />
-        </>
-    )
-}
+  return (
+    <>
+      <Header />
+      <main>
+        <Meals />
+      </main>
+    </>
+  );
+};
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/Meals/AvailableMeals.js b/src/components/Meals/AvailableMeals.js
new file mode 100644
index 0000000..3e21d95
--- /dev/null
+++ b/src/components/Meals/AvailableMeals.js
@@ -0,0 +1,40 @@
+import classes from "./AvailableMeals.module.css";
+
+const DUMMY_MEALS = [
+  {
+    id: "m1",
+    name: "Sushi",
+    description: "Finest fish and veggies",
+    price: 22.99,
+  },
+  {
+    id: "m2",
+    name: "Schnitzel",
+    description: "A german specialty!",
+    price: 16.5,
+  },
+  {
+    id: "m3",
+    name: "Barbecue Burger",
+    description: "American, raw, meaty",
+    price: 12.99,
+  },
+  {
+    id: "m4",
+    name: "Green Bowl",
+    description: "Healthy...and green...",
+    price: 18.99,
+  },
+];
+
+const AvailableMeals = () => {
+  const mealsList = DUMMY_MEALS.map((meal) => <li>{meal.name}</li>);
+
+  return (
+    <section className={classes.meals}>
+      <ul>{mealsList}</ul>
+    </section>
+  );
+};
+
+export default AvailableMeals;
diff --git a/src/components/Meals/AvailableMeals.module.css b/src/components/Meals/AvailableMeals.module.css
new file mode 100644
index 0000000..9b6582f
--- /dev/null
+++ b/src/components/Meals/AvailableMeals.module.css
@@ -0,0 +1,24 @@
+.meals {
+  max-width: 60rem;
+  width: 90%;
+  margin: 2rem auto;
+  animation: meals-appear 1s ease-out forwards;
+}
+
+.meals ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+@keyframes meals-appear {
+  from {
+    opacity: 0;
+    transform: translateY(3rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
\ No newline at end of file
diff --git a/src/components/Meals/Meals.js b/src/components/Meals/Meals.js
new file mode 100644
index 0000000..9521775
--- /dev/null
+++ b/src/components/Meals/Meals.js
@@ -0,0 +1,13 @@
+import MealsSummary from "./MealsSummary";
+import AvailableMeals from "./AvailableMeals";
+
+const Meals = () => {
+  return (
+    <>
+      <AvailableMeals />
+      <MealsSummary />
+    </>
+  );
+};
+
+export default Meals;
diff --git a/src/components/Meals/MealsSummary.js b/src/components/Meals/MealsSummary.js
new file mode 100644
index 0000000..378335d
--- /dev/null
+++ b/src/components/Meals/MealsSummary.js
@@ -0,0 +1,19 @@
+import classes from "./MealsSummary.module.css";
+
+const MealsSummary = () => {
+  return (
+    <section className={classes.summary}>
+      <h2>Delicious Food, Delivered To You</h2>
+      <p>
+        Choose your favorite meal from our broad selection of available meals
+        and enjoy a delicious lunch or dinner at home.
+      </p>
+      <p>
+        All our meals are cooked with high-quality ingredients, just-in-time and
+        of course by experienced chefs!
+      </p>
+    </section>
+  );
+};
+
+export default MealsSummary;
diff --git a/src/components/Meals/MealsSummary.module.css b/src/components/Meals/MealsSummary.module.css
new file mode 100644
index 0000000..a88ccac
--- /dev/null
+++ b/src/components/Meals/MealsSummary.module.css
@@ -0,0 +1,18 @@
+.summary {
+  text-align: center;
+  max-width: 45rem;
+  width: 90%;
+  margin: auto;
+  margin-top: -10rem;
+  position: relative;
+  background-color: #383838;
+  color: white;
+  border-radius: 14px;
+  padding: 1rem;
+  box-shadow: 0 1px 18px 10px rgba(0, 0, 0, 0.25);
+}
+
+.summary h2 {
+  font-size: 2rem;
+  margin-top: 0;
+}
\ No newline at end of file