add meal item form component

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,21 @@ const DUMMY_MEALS = [
 ];
 
 const AvailableMeals = () => {
-  const mealsList = DUMMY_MEALS.map((meal) => <li>{meal.name}</li>);
+  const mealsList = DUMMY_MEALS.map((meal) => (
+    <MealItem
+      id={meal.id}
+      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>
   );
 };

src/components/Meals/MealItem/MealItem.js

@@ -0,0 +1,21 @@
+import classes from "./MealItem.module.css";
+import MealItemForm from "./MealItemForm";
+
+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>
+        <MealItemForm id={props.id} />
+      </div>
+    </li>
+  );
+};
+
+export default MealItem;

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

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

src/components/Meals/Meals.js

@@ -4,8 +4,8 @@ import AvailableMeals from "./AvailableMeals";
 const Meals = () => {
   return (
     <>
-      <AvailableMeals />
       <MealsSummary />
+      <AvailableMeals />
     </>
   );
 };

src/components/UI/Card.js

@@ -0,0 +1,7 @@
+import classes from "./Card.module.css";
+
+const Card = (props) => {
+  return <div className={classes.card}>{props.children}</div>;
+};
+
+export default Card;

src/components/UI/Card.module.css

@@ -0,0 +1,6 @@
+.card {
+  padding: 1rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+  border-radius: 14px;
+  background-color: white;
+}

src/components/UI/Input.js

@@ -0,0 +1,12 @@
+import classes from "./Input.module.css";
+
+const Input = (props) => {
+  return (
+    <div className={classes.input}>
+      <label htmlFor={props.input.id}>{props.label}</label>
+      <input id={props.input.id} {...props.input} />
+    </div>
+  );
+};
+
+export default Input;

src/components/UI/Input.module.css

@@ -0,0 +1,18 @@
+.input {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.input label {
+  font-weight: bold;
+  margin-right: 1rem;
+}
+
+.input input {
+  width: 3rem;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font: inherit;
+  padding-left: 0.5rem;
+}