diff --git a/src/components/Meals/AvailableMeals.js b/src/components/Meals/AvailableMeals.js index 0c23726..be0fa3e 100644 --- a/src/components/Meals/AvailableMeals.js +++ b/src/components/Meals/AvailableMeals.js @@ -32,6 +32,7 @@ const DUMMY_MEALS = [ const AvailableMeals = () => { const mealsList = DUMMY_MEALS.map((meal) => ( { const price = `$${props.price.toFixed(2)}`; @@ -11,7 +12,7 @@ const MealItem = (props) => {
{price}
- +
); diff --git a/src/components/Meals/MealItem/MealItemForm.js b/src/components/Meals/MealItem/MealItemForm.js new file mode 100644 index 0000000..4187312 --- /dev/null +++ b/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 ( +
+ + +
+ ); +}; + +export default MealItemForm; diff --git a/src/components/Meals/MealItem/MealItemForm.module.css b/src/components/Meals/MealItem/MealItemForm.module.css new file mode 100644 index 0000000..3b47383 --- /dev/null +++ b/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; +} \ No newline at end of file