inputs
This commit is contained in:
Tyrel Souza
parent
cc3d72cfc1
commit
0bb2f8f0d0
@ -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"]
|
||||
@ -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',
|
||||
name: 'Sushi',
|
||||
description: 'Finest fish and veggies',
|
||||
id: "m1",
|
||||
name: "Sushi",
|
||||
description: "Finest fish and veggies",
|
||||
price: 22.99,
|
||||
},
|
||||
{
|
||||
id: 'm2',
|
||||
name: 'Schnitzel',
|
||||
description: 'A german specialty!',
|
||||
id: "m2",
|
||||
name: "Schnitzel",
|
||||
description: "A german specialty!",
|
||||
price: 16.5,
|
||||
},
|
||||
{
|
||||
id: 'm3',
|
||||
name: 'Barbecue Burger',
|
||||
description: 'American, raw, meaty',
|
||||
id: "m3",
|
||||
name: "Barbecue Burger",
|
||||
description: "American, raw, meaty",
|
||||
price: 12.99,
|
||||
},
|
||||
{
|
||||
id: 'm4',
|
||||
name: 'Green Bowl',
|
||||
description: 'Healthy...and green...',
|
||||
id: "m4",
|
||||
name: "Green Bowl",
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
20
ordering/src/components/Meals/MealItem/MealItem.js
Normal file
20
ordering/src/components/Meals/MealItem/MealItem.js
Normal file
@ -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
|
||||
23
ordering/src/components/Meals/MealItem/MealItemForm.js
Normal file
23
ordering/src/components/Meals/MealItem/MealItemForm.js
Normal file
@ -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
|
||||
7
ordering/src/components/UI/Card.js
Normal file
7
ordering/src/components/UI/Card.js
Normal file
@ -0,0 +1,7 @@
|
||||
import classes from "./Card.module.css"
|
||||
|
||||
function Card(props) {
|
||||
return <div className={classes.card}>{props.children}</div>
|
||||
}
|
||||
|
||||
export default Card
|
||||
11
ordering/src/components/UI/Input.js
Normal file
11
ordering/src/components/UI/Input.js
Normal file
@ -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
|
||||
Loading…
Reference in New Issue
Block a user