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

---
 src/components/Meals/AvailableMeals.js        |  1 +
 src/components/Meals/MealItem/MealItem.js     |  3 ++-
 src/components/Meals/MealItem/MealItemForm.js | 23 +++++++++++++++++++
 .../Meals/MealItem/MealItemForm.module.css    | 20 ++++++++++++++++
 4 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Meals/MealItem/MealItemForm.js
 create mode 100644 src/components/Meals/MealItem/MealItemForm.module.css

diff --git a/src/components/Meals/AvailableMeals.js b/src/components/Meals/AvailableMeals.js
index 0c23726..be0fa3e 100644
--- a/src/components/Meals/AvailableMeals.js
+++ b/src/components/Meals/AvailableMeals.js
@@ -32,6 +32,7 @@ const DUMMY_MEALS = [
 const AvailableMeals = () => {
   const mealsList = DUMMY_MEALS.map((meal) => (
     <MealItem
+      id={meal.id}
       key={meal.id}
       name={meal.name}
       description={meal.description}
diff --git a/src/components/Meals/MealItem/MealItem.js b/src/components/Meals/MealItem/MealItem.js
index 3711c25..060c813 100644
--- a/src/components/Meals/MealItem/MealItem.js
+++ b/src/components/Meals/MealItem/MealItem.js
@@ -1,4 +1,5 @@
 import classes from "./MealItem.module.css";
+import MealItemForm from "./MealItemForm";
 
 const MealItem = (props) => {
   const price = `$${props.price.toFixed(2)}`;
@@ -11,7 +12,7 @@ const MealItem = (props) => {
         <div className={classes.price}>{price}</div>
       </div>
       <div>
-
+        <MealItemForm id={props.id} />
       </div>
     </li>
   );
diff --git a/src/components/Meals/MealItem/MealItemForm.js b/src/components/Meals/MealItem/MealItemForm.js
new file mode 100644
index 0000000..4187312
--- /dev/null
+++ b/src/components/Meals/MealItem/MealItemForm.js
@@ -0,0 +1,23 @@
+import classes from "./MealItemForm.module.css";
+import Input from "../../UI/Input";
+
+const MealItemForm = (props) => {
+  return (
+    <form className={classes.form}>
+      <Input
+        label="Amount"
+        input={{
+          id: "amount_" + props.id,
+          type: "number",
+          min: "1",
+          max: "5",
+          step: "1",
+          defaultValue: "1",
+        }}
+      />
+      <button>+ Add</button>
+    </form>
+  );
+};
+
+export default MealItemForm;
diff --git a/src/components/Meals/MealItem/MealItemForm.module.css b/src/components/Meals/MealItem/MealItemForm.module.css
new file mode 100644
index 0000000..3b47383
--- /dev/null
+++ b/src/components/Meals/MealItem/MealItemForm.module.css
@@ -0,0 +1,20 @@
+.form {
+  text-align: right;
+}
+
+.form button {
+  font: inherit;
+  cursor: pointer;
+  background-color: #8a2b06;
+  border: 1px solid #8a2b06;
+  color: white;
+  padding: 0.25rem 2rem;
+  border-radius: 20px;
+  font-weight: bold;
+}
+
+.form button:hover,
+.form button:active {
+  background-color: #641e03;
+  border-color: #641e03;
+}
\ No newline at end of file