From c4192ced47b50c7a59fbb5f368f5163ce4fb5f65 Mon Sep 17 00:00:00 2001
From: oscar <oscarzhou0727@icloud.com>
Date: Sat, 18 Mar 2023 12:12:59 +1300
Subject: [PATCH] add meal item component

---
 src/components/Meals/AvailableMeals.js        | 15 +++++++++++--
 src/components/Meals/MealItem/MealItem.js     | 20 +++++++++++++++++
 .../Meals/MealItem/MealItem.module.css        | 22 +++++++++++++++++++
 src/components/Meals/Meals.js                 |  2 +-
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Meals/MealItem/MealItem.js
 create mode 100644 src/components/Meals/MealItem/MealItem.module.css

diff --git a/src/components/Meals/AvailableMeals.js b/src/components/Meals/AvailableMeals.js
index 3e21d95..0c23726 100644
--- a/src/components/Meals/AvailableMeals.js
+++ b/src/components/Meals/AvailableMeals.js
@@ -1,4 +1,6 @@
 import classes from "./AvailableMeals.module.css";
+import Card from "../UI/Card";
+import MealItem from "./MealItem/MealItem";
 
 const DUMMY_MEALS = [
   {
@@ -28,11 +30,20 @@ const DUMMY_MEALS = [
 ];
 
 const AvailableMeals = () => {
-  const mealsList = DUMMY_MEALS.map((meal) => <li>{meal.name}</li>);
+  const mealsList = DUMMY_MEALS.map((meal) => (
+    <MealItem
+      key={meal.id}
+      name={meal.name}
+      description={meal.description}
+      price={meal.price}
+    />
+  ));
 
   return (
     <section className={classes.meals}>
-      <ul>{mealsList}</ul>
+      <Card>
+        <ul>{mealsList}</ul>
+      </Card>
     </section>
   );
 };
diff --git a/src/components/Meals/MealItem/MealItem.js b/src/components/Meals/MealItem/MealItem.js
new file mode 100644
index 0000000..3711c25
--- /dev/null
+++ b/src/components/Meals/MealItem/MealItem.js
@@ -0,0 +1,20 @@
+import classes from "./MealItem.module.css";
+
+const MealItem = (props) => {
+  const price = `$${props.price.toFixed(2)}`;
+
+  return (
+    <li className={classes.meal}>
+      <div>
+        <h3>{props.name}</h3>
+        <div className={classes.description}>{props.description}</div>
+        <div className={classes.price}>{price}</div>
+      </div>
+      <div>
+
+      </div>
+    </li>
+  );
+};
+
+export default MealItem;
diff --git a/src/components/Meals/MealItem/MealItem.module.css b/src/components/Meals/MealItem/MealItem.module.css
new file mode 100644
index 0000000..67ab2e8
--- /dev/null
+++ b/src/components/Meals/MealItem/MealItem.module.css
@@ -0,0 +1,22 @@
+.meal {
+  display: flex;
+  justify-content: space-between;
+  margin: 1rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #ccc;
+}
+
+.meal h3 {
+  margin: 0 0 0.25rem 0;
+}
+
+.description {
+  font-style: italic;
+}
+
+.price {
+  margin-top: 0.25rem;
+  font-weight: bold;
+  color: #ad5502;
+  font-size: 1.25rem;
+}
\ No newline at end of file
diff --git a/src/components/Meals/Meals.js b/src/components/Meals/Meals.js
index 9521775..1ef6a4d 100644
--- a/src/components/Meals/Meals.js
+++ b/src/components/Meals/Meals.js
@@ -4,8 +4,8 @@ import AvailableMeals from "./AvailableMeals";
 const Meals = () => {
   return (
     <>
-      <AvailableMeals />
       <MealsSummary />
+      <AvailableMeals />
     </>
   );
 };