Skip to content

Commit cac99cc

Browse files
karlhadwenkarlhadwen
committed
feat: src
1 parent e880952 commit cac99cc

24 files changed

+703
-191
lines changed

‎.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎package.json

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
{
22
"name": "bootstrap-with-react",
33
"version": "0.1.0",
4-
"private": true,
54
"dependencies": {
65
"@testing-library/jest-dom": "^4.2.4",
76
"@testing-library/react": "^9.3.2",
87
"@testing-library/user-event": "^7.1.2",
8+
"bootstrap": "^4.4.1",
9+
"node-sass": "^4.13.0",
910
"react": "^16.12.0",
11+
"react-bootstrap": "^1.0.0-beta.16",
1012
"react-dom": "^16.12.0",
1113
"react-scripts": "3.3.0"
1214
},
@@ -16,9 +18,6 @@
1618
"test": "react-scripts test",
1719
"eject": "react-scripts eject"
1820
},
19-
"eslintConfig": {
20-
"extends": "react-app"
21-
},
2221
"browserslist": {
2322
"production": [
2423
">0.2%",

‎public/favicon.ico

-3.78 KB
Binary file not shown.

‎public/images/chicago-pizza.jpg

66.2 KB
Loading

‎public/images/neapolitan-pizza.jpg

94.8 KB
Loading

‎public/images/ny-pizza.jpg

77.8 KB
Loading

‎public/images/sicilian-pizza.jpg

87.8 KB
Loading

‎public/index.html

Lines changed: 10 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,16 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1" />
7-
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11-
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<!--
14-
manifest.json provides metadata used when your web app is installed on a
15-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16-
-->
17-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
223

23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>React App</title>
28-
</head>
29-
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
31-
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
4+
<head>
5+
<meta charset="utf-8" />
6+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1" />
8+
<title>Pizza</title>
9+
</head>
3510

36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
11+
<body>
12+
<noscript>You need to enable JavaScript to run this app.</noscript>
13+
<div id="root"></div>
14+
</body>
3815

39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
42-
</body>
4316
</html>

‎public/logo192.png

-5.22 KB
Binary file not shown.

‎public/logo512.png

-9.44 KB
Binary file not shown.

‎public/manifest.json

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎public/robots.txt

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎src/App.css

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎src/App.js

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,34 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React, { useState } from 'react';
2+
import 'bootstrap/dist/css/bootstrap.min.css';
3+
import './App.scss';
4+
5+
import { Container, Row, Col } from 'react-bootstrap';
6+
import { PizzaCard } from './components/PizzaCard';
7+
import { Confirmation } from './components/Confirmation';
8+
import pizzas from './data';
49

510
function App() {
11+
const [ordered, setOrdered] = useState(false);
12+
13+
function displayConfirmation() {
14+
setOrdered(true);
15+
16+
setTimeout(() => {
17+
setOrdered(false);
18+
}, 3000);
19+
}
20+
621
return (
7-
<div className="App">
8-
<header className="App-header">
9-
<img src={logo} className="App-logo" alt="logo" />
10-
<p>
11-
Edit <code>src/App.js</code> and save to reload.
12-
</p>
13-
<a
14-
className="App-link"
15-
href="https://reactjs.org"
16-
target="_blank"
17-
rel="noopener noreferrer"
18-
>
19-
Learn React
20-
</a>
21-
</header>
22-
</div>
22+
<Container>
23+
{ordered && <Confirmation toggle={setOrdered} />}
24+
<Row>
25+
{pizzas.map(data => (
26+
<Col xs={3} className="mb-5" key={`${data.id}`}>
27+
<PizzaCard data={data} setOrdered={displayConfirmation} />
28+
</Col>
29+
))}
30+
</Row>
31+
</Container>
2332
);
2433
}
2534

‎src/App.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* ==========================================================================
2+
PIZZA
3+
========================================================================== */
4+
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700,900');
5+
6+
/* RESETS
7+
============================================ */
8+
9+
html {
10+
-webkit-box-sizing: border-box;
11+
box-sizing: border-box;
12+
}
13+
*, *:before, *:after {
14+
-webkit-box-sizing: inherit;
15+
box-sizing: inherit;
16+
}
17+
18+
body {
19+
margin: 20px 0;
20+
padding: 0;
21+
line-height: 1;
22+
font-family: 'Roboto', sans-serif;
23+
color: #202020;
24+
background-color: #fbfbfb;
25+
font-smooth: always;
26+
-webkit-font-smoothing: antialiased;
27+
-moz-osx-font-smoothing: grayscale;
28+
}
29+
30+
.card .badge {
31+
font-size: 16px;
32+
}
33+
34+
.card .text-secondary {
35+
line-height: 25px;
36+
}
37+
38+
.toast.show {
39+
position: absolute;
40+
left: 20px;
41+
bottom: 20px;
42+
z-index: 10;
43+
}

‎src/App.test.js

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎src/components/Confirmation.jsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import { Toast } from 'react-bootstrap';
3+
4+
export function Confirmation({ toggle }) {
5+
return (
6+
<Toast onClose={() => toggle(false)}>
7+
<Toast.Header>
8+
<strong className="mr-auto">Your Order Is In The Oven</strong>
9+
<small>just now</small>
10+
</Toast.Header>
11+
<Toast.Body>
12+
Your delicious pizza will be with you in 30 minutes!
13+
</Toast.Body>
14+
</Toast>
15+
);
16+
}

‎src/components/PizzaCard.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { Card, Badge, Button } from 'react-bootstrap';
3+
4+
export function PizzaCard({ data, setOrdered }) {
5+
return (
6+
<Card className="h-100 shadow-sm bg-white rounded">
7+
<Card.Img variant="top" src={data.image} />
8+
<Card.Body className="d-flex flex-column">
9+
<div className="d-flex mb-2 justify-content-between">
10+
<Card.Title className="mb-0 font-weight-bold">{data.name}</Card.Title>
11+
<Badge pill className="mb-1" variant="warning">
12+
£{data.price}
13+
</Badge>
14+
</div>
15+
<Card.Text className="text-secondary">{data.desc}</Card.Text>
16+
<Button
17+
onClick={() => setOrdered()}
18+
className="mt-auto font-weight-bold"
19+
variant="success"
20+
block
21+
>
22+
Order Pizza 🍕
23+
</Button>
24+
</Card.Body>
25+
</Card>
26+
);
27+
}

‎src/data.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
[
2+
{
3+
"id": 1,
4+
"name": "Chicago Pizza",
5+
"image": "/images/chicago-pizza.jpg",
6+
"desc": "The pan in which it is baked gives the pizza its characteristically high edge which provides ample space for large amounts of cheese and a chunky tomato sauce.",
7+
"price": 9
8+
},
9+
{
10+
"id": 2,
11+
"name": "Neapolitan Pizza",
12+
"image": "/images/neapolitan-pizza.jpg",
13+
"desc": "This style of pizza is prepared with simple and fresh ingredients: a basic dough, raw tomatoes, fresh mozzarella cheese, fresh basil, and olive oil. A fantastic original pizza.",
14+
"price": 7
15+
},
16+
{
17+
"id": 3,
18+
"name": "New York Pizza",
19+
"image": "/images/ny-pizza.jpg",
20+
"desc": "New York-style pizza has slices that are large and wide with a thin crust that is foldable yet crispy. It is traditionally topped with tomato sauce and mozzarella cheese.",
21+
"price": 8
22+
},
23+
{
24+
"id": 4,
25+
"name": "Sicilian Pizza",
26+
"image": "/images/sicilian-pizza.jpg",
27+
"desc": "Sicilian pizza is pizza prepared in a manner that originated in Sicily, Italy. Sicilian pizza is also known as sfincione or focaccia with toppings. A great tasteful pizza all around.",
28+
"price": 9
29+
}
30+
]

‎src/index.css

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎src/index.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import './index.css';
2+
import { render } from 'react-dom';
43
import App from './App';
54
import * as serviceWorker from './serviceWorker';
65

7-
ReactDOM.render(<App />, document.getElementById('root'));
6+
render(<App />, document.getElementById('root'));
87

9-
// If you want your app to work offline and load faster, you can change
10-
// unregister() to register() below. Note this comes with some pitfalls.
11-
// Learn more about service workers: https://bit.ly/CRA-PWA
12-
serviceWorker.unregister();
8+
serviceWorker.register();

‎src/logo.svg

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/setupTests.js

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)