add meal item form component

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}

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>
   );

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;

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;
+}