inputs

ordering/.eslintcache

@@ -1 +1 @@
-[{"/code/gitea/udemy-react-course/ordering/src/index.js":"1","/code/gitea/udemy-react-course/ordering/src/App.js":"2","/code/gitea/udemy-react-course/ordering/src/components/Layout/Header.js":"3","/code/gitea/udemy-react-course/ordering/src/components/Layout/HeaderCartButton.js":"4","/code/gitea/udemy-react-course/ordering/src/components/Cart/CartIcon.js":"5","/code/gitea/udemy-react-course/ordering/src/components/Meals/Meals.js":"6","/code/gitea/udemy-react-course/ordering/src/components/Meals/MealsSummary.js":"7","/code/gitea/udemy-react-course/ordering/src/components/Meals/AvailableMeals.js":"8","/code/gitea/udemy-react-course/ordering/src/components/Meals/dummy-meals.js":"9"},{"size":179,"mtime":1648642748000,"results":"10","hashOfConfig":"11"},{"size":262,"mtime":1663957809239,"results":"12","hashOfConfig":"11"},{"size":550,"mtime":1663957504588,"results":"13","hashOfConfig":"11"},{"size":453,"mtime":1663957524740,"results":"14","hashOfConfig":"11"},{"size":488,"mtime":1663956419417,"results":"15","hashOfConfig":"11"},{"size":233,"mtime":1663957780583,"results":"16","hashOfConfig":"11"},{"size":529,"mtime":1663957501324,"results":"17","hashOfConfig":"11"},{"size":749,"mtime":1663957905318,"results":"18","hashOfConfig":"11"},{"size":0,"mtime":1663957879313,"results":"19","hashOfConfig":"11"},{"filePath":"20","messages":"21","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"gx63om",{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"27","messages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/code/gitea/udemy-react-course/ordering/src/index.js",[],"/code/gitea/udemy-react-course/ordering/src/App.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Layout/Header.js",[],["39","40"],"/code/gitea/udemy-react-course/ordering/src/components/Layout/HeaderCartButton.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Cart/CartIcon.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/Meals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/MealsSummary.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/AvailableMeals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/dummy-meals.js",[],{"ruleId":"41","replacedBy":"42"},{"ruleId":"43","replacedBy":"44"},"no-native-reassign",["45"],"no-negated-in-lhs",["46"],"no-global-assign","no-unsafe-negation"]
+[{"/code/gitea/udemy-react-course/ordering/src/index.js":"1","/code/gitea/udemy-react-course/ordering/src/App.js":"2","/code/gitea/udemy-react-course/ordering/src/components/Layout/Header.js":"3","/code/gitea/udemy-react-course/ordering/src/components/Layout/HeaderCartButton.js":"4","/code/gitea/udemy-react-course/ordering/src/components/Cart/CartIcon.js":"5","/code/gitea/udemy-react-course/ordering/src/components/Meals/Meals.js":"6","/code/gitea/udemy-react-course/ordering/src/components/Meals/MealsSummary.js":"7","/code/gitea/udemy-react-course/ordering/src/components/Meals/AvailableMeals.js":"8","/code/gitea/udemy-react-course/ordering/src/components/Meals/dummy-meals.js":"9","/code/gitea/udemy-react-course/ordering/src/components/UI/Card.js":"10","/code/gitea/udemy-react-course/ordering/src/components/Meals/MealItem/MealItem.js":"11","/code/gitea/udemy-react-course/ordering/src/components/Meals/MealItem/MealItemForm.js":"12","/code/gitea/udemy-react-course/ordering/src/components/UI/Input.js":"13"},{"size":179,"mtime":1648642748000,"results":"14","hashOfConfig":"15"},{"size":262,"mtime":1663957809239,"results":"16","hashOfConfig":"15"},{"size":550,"mtime":1663957504588,"results":"17","hashOfConfig":"15"},{"size":453,"mtime":1663957524740,"results":"18","hashOfConfig":"15"},{"size":488,"mtime":1663956419417,"results":"19","hashOfConfig":"15"},{"size":233,"mtime":1663957780583,"results":"20","hashOfConfig":"15"},{"size":529,"mtime":1663957501324,"results":"21","hashOfConfig":"15"},{"size":1090,"mtime":1663962009951,"results":"22","hashOfConfig":"15"},{"size":0,"mtime":1663957879313,"results":"23","hashOfConfig":"15"},{"size":151,"mtime":1663961477366,"results":"24","hashOfConfig":"15"},{"size":540,"mtime":1663962187735,"results":"25","hashOfConfig":"15"},{"size":565,"mtime":1663962483138,"results":"26","hashOfConfig":"15"},{"size":268,"mtime":1663962378512,"results":"27","hashOfConfig":"15"},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"gx63om",{"filePath":"30","messages":"31","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"34"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"47","messages":"48","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"49","messages":"50","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"51","messages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"53","messages":"54","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/code/gitea/udemy-react-course/ordering/src/index.js",[],"/code/gitea/udemy-react-course/ordering/src/App.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Layout/Header.js",[],["55","56"],"/code/gitea/udemy-react-course/ordering/src/components/Layout/HeaderCartButton.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Cart/CartIcon.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/Meals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/MealsSummary.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/AvailableMeals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/dummy-meals.js",[],"/code/gitea/udemy-react-course/ordering/src/components/UI/Card.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/MealItem/MealItem.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Meals/MealItem/MealItemForm.js",[],"/code/gitea/udemy-react-course/ordering/src/components/UI/Input.js",[],{"ruleId":"57","replacedBy":"58"},{"ruleId":"59","replacedBy":"60"},"no-native-reassign",["61"],"no-negated-in-lhs",["62"],"no-global-assign","no-unsafe-negation"]

ordering/src/components/Meals/AvailableMeals.js

@@ -1,38 +1,49 @@
 import classes from "./AvailableMeals.module.css"
+import Card from "../UI/Card"
+import MealItem from "./MealItem/MealItem"
 
 const DUMMY_MEALS = [
     {
-    id: 'm1',
+        id: "m1",
-    name: 'Sushi',
+        name: "Sushi",
-    description: 'Finest fish and veggies',
+        description: "Finest fish and veggies",
         price: 22.99,
     },
     {
-    id: 'm2',
+        id: "m2",
-    name: 'Schnitzel',
+        name: "Schnitzel",
-    description: 'A german specialty!',
+        description: "A german specialty!",
         price: 16.5,
     },
     {
-    id: 'm3',
+        id: "m3",
-    name: 'Barbecue Burger',
+        name: "Barbecue Burger",
-    description: 'American, raw, meaty',
+        description: "American, raw, meaty",
         price: 12.99,
     },
     {
-    id: 'm4',
+        id: "m4",
-    name: 'Green Bowl',
+        name: "Green Bowl",
-    description: 'Healthy...and green...',
+        description: "Healthy...and green...",
         price: 18.99,
     },
-];
+]
 
 function 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}>
+            <Card>
                 <ul>{mealsList}</ul>
+            </Card>
         </section>
     )
 }

ordering/src/components/Meals/MealItem/MealItem.js

@@ -0,0 +1,20 @@
+import classes from "./MealItem.module.css"
+import MealItemForm from "./MealItemForm"
+
+function 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 />
+            </div>
+        </li>
+    )
+}
+
+export default MealItem

ordering/src/components/Meals/MealItem/MealItemForm.js

@@ -0,0 +1,23 @@
+import classes from "./MealItemForm.module.css"
+import Input from "../../UI/Input"
+
+function MealItemForm(props) {
+    return (
+        <form className={classes.form}>
+            <Input
+                label="Amount"
+                input={{
+                    id: "amount",
+                    type: "number",
+                    min: "1",
+                    max: "5",
+                    step: "1",
+                    defaultValue: "1",
+                }}
+            />
+            <button>+ Add</button>
+        </form>
+    )
+}
+
+export default MealItemForm

ordering/src/components/UI/Card.js

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

ordering/src/components/UI/Input.js

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