Skip to content

Commit 9c13829

Browse files
Rafeh QaziRafeh Qazi
Rafeh Qazi
authored and
Rafeh Qazi
committed
initial commit part 1
1 parent 3c2d77c commit 9c13829

22 files changed

+836
-88
lines changed

‎package-lock.json

Lines changed: 334 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.11.0",
7+
"@material-ui/icons": "^4.9.1",
68
"@testing-library/jest-dom": "^4.2.4",
79
"@testing-library/react": "^9.5.0",
810
"@testing-library/user-event": "^7.2.1",
911
"react": "^16.13.1",
12+
"react-currency-format": "^1.0.0",
1013
"react-dom": "^16.13.1",
14+
"react-router-dom": "^5.2.0",
1115
"react-scripts": "3.4.3"
1216
},
1317
"scripts": {

‎src/App.css

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +0,0 @@
1-
.App {
2-
text-align: center;
3-
}
4-
5-
.App-logo {
6-
height: 40vmin;
7-
pointer-events: none;
8-
}
9-
10-
@media (prefers-reduced-motion: no-preference) {
11-
.App-logo {
12-
animation: App-logo-spin infinite 20s linear;
13-
}
14-
}
15-
16-
.App-header {
17-
background-color: #282c34;
18-
min-height: 100vh;
19-
display: flex;
20-
flex-direction: column;
21-
align-items: center;
22-
justify-content: center;
23-
font-size: calc(10px + 2vmin);
24-
color: white;
25-
}
26-
27-
.App-link {
28-
color: #61dafb;
29-
}
30-
31-
@keyframes App-logo-spin {
32-
from {
33-
transform: rotate(0deg);
34-
}
35-
to {
36-
transform: rotate(360deg);
37-
}
38-
}

‎src/App.js

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1-
import React from 'react';
2-
import logo from './logo.svg';
3-
import './App.css';
1+
import React from "react";
2+
import "./App.css";
3+
import Header from "./Header";
4+
import Home from "./Home";
5+
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
6+
import Checkout from "./Checkout";
47

58
function App() {
69
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>
10+
// BEM
11+
<Router>
12+
<div className="app">
13+
<Header />
14+
15+
<Switch>
16+
<Route path="/checkout">
17+
<Checkout />
18+
</Route>
19+
<Route path="/">
20+
<Home />
21+
</Route>
22+
</Switch>
23+
</div>
24+
</Router>
2325
);
2426
}
2527

‎src/App.test.js

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

‎src/Checkout.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.checkout {
2+
display: flex;
3+
padding: 20px;
4+
background-color: white;
5+
height: max-content;
6+
}
7+
8+
.checkout__ad {
9+
width: 100%;
10+
margin-bottom: 10px;
11+
}
12+
13+
.checkout__title {
14+
margin-right: 10px;
15+
padding: 10px;
16+
border-bottom: 1px solid lightgray;
17+
}

‎src/Checkout.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React from "react";
2+
import "./Checkout.css";
3+
import Subtotal from "./Subtotal";
4+
5+
function Checkout() {
6+
return (
7+
<div className="checkout">
8+
<div className="checkout__left">
9+
<img
10+
className="checkout__ad"
11+
src="https://images-na.ssl-images-amazon.com/images/G/02/UK_CCMP/TM/OCC_Amazon1._CB423492668_.jpg"
12+
alt=""
13+
/>
14+
15+
<div>
16+
<h2 className="checkout__title">Your shopping Basket</h2>
17+
18+
{/* BasketItem */}
19+
{/* BasketItem */}
20+
{/* BasketItem */}
21+
{/* BasketItem */}
22+
{/* BasketItem */}
23+
</div>
24+
</div>
25+
26+
<div className="checkout__right">
27+
<Subtotal />
28+
</div>
29+
</div>
30+
);
31+
}
32+
33+
export default Checkout;

‎src/Header.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.header {
2+
height: 60px;
3+
display: flex;
4+
align-items: center;
5+
background-color: #131921;
6+
position: sticky;
7+
top: 0;
8+
z-index: 100;
9+
}
10+
11+
.header__logo {
12+
width: 100px;
13+
object-fit: contain;
14+
margin: 0 20px;
15+
margin-top: 18px;
16+
}
17+
18+
.header__search {
19+
display: flex;
20+
flex: 1;
21+
align-items: center;
22+
border-radius: 24px;
23+
}
24+
25+
.header__searchInput {
26+
height: 12px;
27+
padding: 10px;
28+
border: none;
29+
width: 100%;
30+
}
31+
32+
.header__searchIcon {
33+
padding: 5px;
34+
height: 22px !important;
35+
background-color: #cd9042;
36+
}
37+
38+
.header__optionLineOne {
39+
font-size: 10px;
40+
}
41+
42+
.header__optionLineTwo {
43+
font-size: 13px;
44+
font-weight: 800;
45+
}
46+
47+
.header__optionBasket {
48+
display: flex;
49+
align-items: center;
50+
color: white;
51+
}
52+
53+
.header__basketCount {
54+
margin-left: 10px;
55+
margin-right: 10px;
56+
}
57+
58+
.header__nav {
59+
display: flex;
60+
justify-content: space-evenly;
61+
}
62+
63+
.header__option {
64+
display: flex;
65+
flex-direction: column;
66+
margin-left: 10px;
67+
margin-right: 10px;
68+
color: white;
69+
}

‎src/Header.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from "react";
2+
import "./Header.css";
3+
import SearchIcon from "@material-ui/icons/Search";
4+
import ShoppingBasketIcon from "@material-ui/icons/ShoppingBasket";
5+
import { Link } from "react-router-dom";
6+
import { useStateValue } from "./StateProvider";
7+
8+
function Header() {
9+
const [{ basket }, dispatch] = useStateValue();
10+
11+
return (
12+
<div className="header">
13+
<Link to="/">
14+
<img
15+
className="header__logo"
16+
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
17+
/>
18+
</Link>
19+
20+
<div className="header__search">
21+
<input className="header__searchInput" type="text" />
22+
<SearchIcon className="header__searchIcon" />
23+
</div>
24+
25+
<div className="header__nav">
26+
<div className="header__option">
27+
<span className="header__optionLineOne">Hello Guest</span>
28+
<span className="header__optionLineTwo">Sign In</span>
29+
</div>
30+
31+
<div className="header__option">
32+
<span className="header__optionLineOne">Returns</span>
33+
<span className="header__optionLineTwo">& Orders</span>
34+
</div>
35+
36+
<div className="header__option">
37+
<span className="header__optionLineOne">Your</span>
38+
<span className="header__optionLineTwo">Prime</span>
39+
</div>
40+
41+
<Link to="/checkout">
42+
<div className="header__optionBasket">
43+
<ShoppingBasketIcon />
44+
<span className="header__optionLineTwo header__basketCount">
45+
{basket?.length}
46+
</span>
47+
</div>
48+
</Link>
49+
</div>
50+
</div>
51+
);
52+
}
53+
54+
export default Header;

‎src/Home.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.home {
2+
display: flex;
3+
justify-content: center;
4+
margin-left: auto;
5+
margin-right: auto;
6+
max-width: 1500px;
7+
}
8+
9+
.home__row {
10+
display: flex;
11+
z-index: 1;
12+
margin-left: 5px;
13+
margin-right: 5px;
14+
}
15+
16+
.home__image {
17+
width: 100%;
18+
z-index: -1;
19+
margin-bottom: -150px;
20+
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
21+
}

0 commit comments

Comments
 (0)