header
This commit is contained in:
parent
bfce59fa80
commit
25b9fba3ff
1
ordering/.eslintcache
Normal file
1
ordering/.eslintcache
Normal file
@ -0,0 +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"},{"size":179,"mtime":1648642748000,"results":"6","hashOfConfig":"7"},{"size":152,"mtime":1663957076489,"results":"8","hashOfConfig":"7"},{"size":550,"mtime":1663957391257,"results":"9","hashOfConfig":"7"},{"size":453,"mtime":1663957353508,"results":"10","hashOfConfig":"7"},{"size":488,"mtime":1663956419417,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"gx63om",{"filePath":"14","messages":"15","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"16","messages":"17","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"18","messages":"19","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"20","messages":"21","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",[],"/code/gitea/udemy-react-course/ordering/src/components/Layout/HeaderCartButton.js",[],"/code/gitea/udemy-react-course/ordering/src/components/Cart/CartIcon.js",[]]
|
6
ordering/.prettierrc.json
Normal file
6
ordering/.prettierrc.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"trailingComma": "es5",
|
||||||
|
"tabWidth": 4,
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": false
|
||||||
|
}
|
38170
ordering/package-lock.json
generated
Normal file
38170
ordering/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
38
ordering/package.json
Normal file
38
ordering/package.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "react-complete-guide",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "^5.11.6",
|
||||||
|
"@testing-library/react": "^11.2.2",
|
||||||
|
"@testing-library/user-event": "^12.5.0",
|
||||||
|
"react": "^18.0.0",
|
||||||
|
"react-dom": "^18.0.0",
|
||||||
|
"react-scripts": "4.0.1",
|
||||||
|
"web-vitals": "^0.2.4"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
BIN
ordering/public/favicon.ico
Normal file
BIN
ordering/public/favicon.ico
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.8 KiB |
43
ordering/public/index.html
Normal file
43
ordering/public/index.html
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
BIN
ordering/public/logo192.png
Normal file
BIN
ordering/public/logo192.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.2 KiB |
BIN
ordering/public/logo512.png
Normal file
BIN
ordering/public/logo512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.4 KiB |
25
ordering/public/manifest.json
Normal file
25
ordering/public/manifest.json
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo512.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
3
ordering/public/robots.txt
Normal file
3
ordering/public/robots.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
10
ordering/src/App.js
Normal file
10
ordering/src/App.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import Header from "./components/Layout/Header"
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header />
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
BIN
ordering/src/assets/meals.jpg
Normal file
BIN
ordering/src/assets/meals.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 407 KiB |
24
ordering/src/components/AvailableMeals.module.css
Normal file
24
ordering/src/components/AvailableMeals.module.css
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
.meals {
|
||||||
|
max-width: 60rem;
|
||||||
|
width: 90%;
|
||||||
|
margin: 2rem auto;
|
||||||
|
animation: meals-appear 1s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meals ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes meals-appear {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(3rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
6
ordering/src/components/Cart/Card.module.css
Normal file
6
ordering/src/components/Cart/Card.module.css
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
.card {
|
||||||
|
padding: 1rem;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
||||||
|
border-radius: 14px;
|
||||||
|
background-color: white;
|
||||||
|
}
|
46
ordering/src/components/Cart/Cart.module.css
Normal file
46
ordering/src/components/Cart/Cart.module.css
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
.cart-items {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
max-height: 20rem;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions button {
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: transparent;
|
||||||
|
border: 1px solid #8a2b06;
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
border-radius: 25px;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions button:hover,
|
||||||
|
.actions button:active {
|
||||||
|
background-color: #5a1a01;
|
||||||
|
border-color: #5a1a01;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions .button--alt {
|
||||||
|
color: #8a2b06;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions .button {
|
||||||
|
background-color: #8a2b06;
|
||||||
|
color: white;
|
||||||
|
}
|
13
ordering/src/components/Cart/CartIcon.js
Normal file
13
ordering/src/components/Cart/CartIcon.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
const CartIcon = () => {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns='http://www.w3.org/2000/svg'
|
||||||
|
viewBox='0 0 20 20'
|
||||||
|
fill='currentColor'
|
||||||
|
>
|
||||||
|
<path d='M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z' />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CartIcon;
|
23
ordering/src/components/Cart/CartItem.js
Normal file
23
ordering/src/components/Cart/CartItem.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import classes from './CartItem.module.css';
|
||||||
|
|
||||||
|
const CartItem = (props) => {
|
||||||
|
const price = `$${props.price.toFixed(2)}`;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li className={classes['cart-item']}>
|
||||||
|
<div>
|
||||||
|
<h2>{props.name}</h2>
|
||||||
|
<div className={classes.summary}>
|
||||||
|
<span className={classes.price}>{price}</span>
|
||||||
|
<span className={classes.amount}>x {props.amount}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={classes.actions}>
|
||||||
|
<button onClick={props.onRemove}>−</button>
|
||||||
|
<button onClick={props.onAdd}>+</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CartItem;
|
65
ordering/src/components/Cart/CartItem.module.css
Normal file
65
ordering/src/components/Cart/CartItem.module.css
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
.cart-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 2px solid #8a2b06;
|
||||||
|
padding: 1rem 0;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item h2 {
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
|
color: #363636;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary {
|
||||||
|
width: 10rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
font-weight: bold;
|
||||||
|
color: #8a2b06;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount {
|
||||||
|
font-weight: bold;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 0.25rem 0.75rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #363636;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.actions {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item button {
|
||||||
|
font: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
color: #8a2b06;
|
||||||
|
border: 1px solid #8a2b06;
|
||||||
|
width: 3rem;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 1rem;
|
||||||
|
margin: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item button:hover,
|
||||||
|
.cart-item button:active {
|
||||||
|
background-color: #8a2b06;
|
||||||
|
color: white;
|
||||||
|
}
|
18
ordering/src/components/Input.module.css
Normal file
18
ordering/src/components/Input.module.css
Normal file
@ -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;
|
||||||
|
}
|
20
ordering/src/components/Layout/Header.js
Normal file
20
ordering/src/components/Layout/Header.js
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from "react"
|
||||||
|
import mealsImage from "../../assets/meals.jpg"
|
||||||
|
import classes from "./Header.module.css"
|
||||||
|
import HeaderCartButton from "./HeaderCartButton"
|
||||||
|
|
||||||
|
function Header(props) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<header className={classes.header}>
|
||||||
|
<h1>React Meals</h1>
|
||||||
|
<HeaderCartButton/>
|
||||||
|
</header>
|
||||||
|
<div className={classes["main-image"]}>
|
||||||
|
<img src={mealsImage} alt="Table full of delicious food." />
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Header
|
29
ordering/src/components/Layout/Header.module.css
Normal file
29
ordering/src/components/Layout/Header.module.css
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
.header {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 5rem;
|
||||||
|
background-color: #8a2b06;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 10%;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 25rem;
|
||||||
|
z-index: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-image img {
|
||||||
|
width: 110%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
transform: rotateZ(-5deg) translateY(-4rem) translateX(-1rem);
|
||||||
|
}
|
18
ordering/src/components/Layout/HeaderCartButton.js
Normal file
18
ordering/src/components/Layout/HeaderCartButton.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import CartIcon from "../Cart/CartIcon"
|
||||||
|
import classes from "./HeaderCartButton.module.css"
|
||||||
|
|
||||||
|
function HeaderCartButton(props) {
|
||||||
|
return (
|
||||||
|
<button className={classes.button}>
|
||||||
|
<span className={classes.icon}>
|
||||||
|
<CartIcon />
|
||||||
|
</span>
|
||||||
|
<span>Your Cart</span>
|
||||||
|
<span className={classes.badge}>
|
||||||
|
3
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HeaderCartButton
|
59
ordering/src/components/Layout/HeaderCartButton.module.css
Normal file
59
ordering/src/components/Layout/HeaderCartButton.module.css
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
.button {
|
||||||
|
cursor: pointer;
|
||||||
|
font: inherit;
|
||||||
|
border: none;
|
||||||
|
background-color: #4d1601;
|
||||||
|
color: white;
|
||||||
|
padding: 0.75rem 3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 25px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover,
|
||||||
|
.button:active {
|
||||||
|
background-color: #2c0d00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 1.35rem;
|
||||||
|
height: 1.35rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background-color: #b94517;
|
||||||
|
padding: 0.25rem 1rem;
|
||||||
|
border-radius: 25px;
|
||||||
|
margin-left: 1rem;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover .badge,
|
||||||
|
.button:active .badge {
|
||||||
|
background-color: #92320c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bump {
|
||||||
|
animation: bump 300ms ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bump {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
10% {
|
||||||
|
transform: scale(0.9);
|
||||||
|
}
|
||||||
|
30% {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: scale(1.15);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
22
ordering/src/components/Meals/MealItem.module.css
Normal file
22
ordering/src/components/Meals/MealItem.module.css
Normal file
@ -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;
|
||||||
|
}
|
20
ordering/src/components/Meals/MealItemForm.module.css
Normal file
20
ordering/src/components/Meals/MealItemForm.module.css
Normal file
@ -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;
|
||||||
|
}
|
19
ordering/src/components/Meals/MealsSummary.js
Normal file
19
ordering/src/components/Meals/MealsSummary.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import classes from './MealsSummary.module.css';
|
||||||
|
|
||||||
|
const MealsSummary = () => {
|
||||||
|
return (
|
||||||
|
<section className={classes.summary}>
|
||||||
|
<h2>Delicious Food, Delivered To You</h2>
|
||||||
|
<p>
|
||||||
|
Choose your favorite meal from our broad selection of available meals
|
||||||
|
and enjoy a delicious lunch or dinner at home.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
All our meals are cooked with high-quality ingredients, just-in-time and
|
||||||
|
of course by experienced chefs!
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MealsSummary;
|
18
ordering/src/components/Meals/MealsSummary.module.css
Normal file
18
ordering/src/components/Meals/MealsSummary.module.css
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
.summary {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 45rem;
|
||||||
|
width: 90%;
|
||||||
|
margin: auto;
|
||||||
|
margin-top: -10rem;
|
||||||
|
position: relative;
|
||||||
|
background-color: #383838;
|
||||||
|
color: white;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 1rem;
|
||||||
|
box-shadow: 0 1px 18px 10px rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
26
ordering/src/components/Meals/dummy-meals.js
Normal file
26
ordering/src/components/Meals/dummy-meals.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
const DUMMY_MEALS = [
|
||||||
|
{
|
||||||
|
id: 'm1',
|
||||||
|
name: 'Sushi',
|
||||||
|
description: 'Finest fish and veggies',
|
||||||
|
price: 22.99,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'm2',
|
||||||
|
name: 'Schnitzel',
|
||||||
|
description: 'A german specialty!',
|
||||||
|
price: 16.5,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'm3',
|
||||||
|
name: 'Barbecue Burger',
|
||||||
|
description: 'American, raw, meaty',
|
||||||
|
price: 12.99,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'm4',
|
||||||
|
name: 'Green Bowl',
|
||||||
|
description: 'Healthy...and green...',
|
||||||
|
price: 18.99,
|
||||||
|
},
|
||||||
|
];
|
BIN
ordering/src/components/Meals/meals.jpg
Normal file
BIN
ordering/src/components/Meals/meals.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 407 KiB |
40
ordering/src/components/Modal.module.css
Normal file
40
ordering/src/components/Modal.module.css
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
.backdrop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 20;
|
||||||
|
background-color: rgba(0, 0, 0, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
position: fixed;
|
||||||
|
top: 20vh;
|
||||||
|
left: 5%;
|
||||||
|
width: 90%;
|
||||||
|
background-color: white;
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 14px;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
|
||||||
|
z-index: 30;
|
||||||
|
animation: slide-down 300ms ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 768px) {
|
||||||
|
.modal {
|
||||||
|
width: 40rem;
|
||||||
|
left: calc(50% - 20rem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes slide-down {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-3rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
15
ordering/src/index.css
Normal file
15
ordering/src/index.css
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: 'Noto Sans JP', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
background-color: #3f3f3f;
|
||||||
|
}
|
||||||
|
|
7
ordering/src/index.js
Normal file
7
ordering/src/index.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||||
|
root.render(<App />);
|
@ -1 +1 @@
|
|||||||
[{"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js":"1","/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js":"2","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js":"3","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js":"4","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js":"5","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js":"6","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js":"7","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js":"8","/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js":"9","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js":"10"},{"size":322,"mtime":1663949419058,"results":"11","hashOfConfig":"12"},{"size":514,"mtime":1663949472127,"results":"13","hashOfConfig":"12"},{"size":458,"mtime":1663949557069,"results":"14","hashOfConfig":"12"},{"size":333,"mtime":1663948682144,"results":"15","hashOfConfig":"12"},{"size":3908,"mtime":1663952805085,"results":"16","hashOfConfig":"12"},{"size":828,"mtime":1663949120275,"results":"17","hashOfConfig":"12"},{"size":218,"mtime":1663942019122,"results":"18","hashOfConfig":"12"},{"size":353,"mtime":1663942019122,"results":"19","hashOfConfig":"12"},{"size":1036,"mtime":1663949348496,"results":"20","hashOfConfig":"12"},{"size":850,"mtime":1663952769772,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"s4xwqj",{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js",[],["43","44"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js",["45"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js",[],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":14,"column":10,"nodeType":"52","messageId":"53","endLine":14,"endColumn":19},"no-native-reassign",["54"],"no-negated-in-lhs",["55"],"no-unused-vars","'toBeValid' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
|
[{"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js":"1","/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js":"2","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js":"3","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js":"4","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js":"5","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js":"6","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js":"7","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js":"8","/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js":"9","/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js":"10"},{"size":322,"mtime":1663949419058,"results":"11","hashOfConfig":"12"},{"size":514,"mtime":1663949472127,"results":"13","hashOfConfig":"12"},{"size":458,"mtime":1663949557069,"results":"14","hashOfConfig":"12"},{"size":333,"mtime":1663948682144,"results":"15","hashOfConfig":"12"},{"size":3908,"mtime":1663952934352,"results":"16","hashOfConfig":"12"},{"size":828,"mtime":1663949120275,"results":"17","hashOfConfig":"12"},{"size":218,"mtime":1663942019122,"results":"18","hashOfConfig":"12"},{"size":353,"mtime":1663942019122,"results":"19","hashOfConfig":"12"},{"size":1036,"mtime":1663949348496,"results":"20","hashOfConfig":"12"},{"size":850,"mtime":1663952769772,"results":"21","hashOfConfig":"12"},{"filePath":"22","messages":"23","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"s4xwqj",{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"30"},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/code/gitea/udemy-react-course/usereducer-starting-project/src/index.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/App.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Home/Home.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/MainHeader.js",[],["43","44"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/Login/Login.js",["45"],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/MainHeader/Navigation.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Card/Card.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Button/Button.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/store/auth-context.js",[],"/code/gitea/udemy-react-course/usereducer-starting-project/src/components/UI/Input/Input.js",[],{"ruleId":"46","replacedBy":"47"},{"ruleId":"48","replacedBy":"49"},{"ruleId":"50","severity":1,"message":"51","line":14,"column":10,"nodeType":"52","messageId":"53","endLine":14,"endColumn":19},"no-native-reassign",["54"],"no-negated-in-lhs",["55"],"no-unused-vars","'toBeValid' is defined but never used.","Identifier","unusedVar","no-global-assign","no-unsafe-negation"]
|
Loading…
Reference in New Issue
Block a user