src/components/Meals/AvailableMeals.js

@@ -1,6 +1,4 @@
 import classes from "./AvailableMeals.module.css";
-import Card from "../UI/Card";
-import MealItem from "./MealItem/MealItem";
 
 const DUMMY_MEALS = [
   {
@@ -30,21 +28,11 @@ const DUMMY_MEALS = [
 ];
 
 const AvailableMeals = () => {
-  const mealsList = DUMMY_MEALS.map((meal) => (
+  const mealsList = DUMMY_MEALS.map((meal) => <li>{meal.name}</li>);
-    <MealItem
-      id={meal.id}
-      key={meal.id}
-      name={meal.name}
-      description={meal.description}
-      price={meal.price}
-    />
-  ));
 
   return (
     <section className={classes.meals}>
-      <Card>
       <ul>{mealsList}</ul>
-      </Card>
     </section>
   );
 };

src/components/Meals/MealItem/MealItem.js

@@ -1,21 +0,0 @@
-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

@@ -1,22 +0,0 @@
-.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

@@ -1,23 +0,0 @@
-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

@@ -1,20 +0,0 @@
-.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 (
     <>
-      <MealsSummary />
       <AvailableMeals />
+      <MealsSummary />
     </>
   );
 };

src/components/UI/Card.js

@@ -1,7 +0,0 @@
-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

@@ -1,6 +0,0 @@
-.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

@@ -1,12 +0,0 @@
-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

@@ -1,18 +0,0 @@
-.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;
-}