Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9fa2175

Browse files
ecommerce product page app
1 parent 926f897 commit 9fa2175

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+1664
-2
lines changed

‎src/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import ToDo from './components/intermediate/ToDo/ToDo';
2828
import StaticJobs from './components/intermediate/StaticJobs/StaticJobs';
2929
import SunnySide from './components/junior/sunnySide/SunnySide';
3030
import PlanetFacts from './pages/intermediate/PlanetFacts/PlanetFacts';
31+
import ProductPage from './components/intermediate/ProductPage/ProductPage';
3132

3233
const App = () => {
3334

@@ -80,7 +81,7 @@ AOS.init({
8081

8182

8283
{/* Working on currently */}
83-
<Route path='/build' element={<PlanetFacts></PlanetFacts>}/>
84+
<Route path='/build' element={<ProductPage></ProductPage>}/>
8485
<Route path='*' element={<Error></Error>}></Route>
8586
</Routes>
8687
</Router>
Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
.product-page-cart-container {
2+
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
3+
rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
4+
background-color: hsl(223, 64%, 98%);
5+
position: absolute;
6+
top: 90px;
7+
right: 40px;
8+
width: 300px;
9+
min-height: 200px;
10+
border-radius: 10px;
11+
z-index: 50;
12+
display: grid;
13+
grid-template-rows: auto 1fr;
14+
}
15+
16+
.product-page-cart-title {
17+
padding: 20px;
18+
border-bottom: 0.5px solid hsl(220, 14%, 75%);
19+
font-weight: 700;
20+
}
21+
22+
.product-page-empty-cart {
23+
display: grid;
24+
place-items: center;
25+
font-weight: 700;
26+
font-size: 14px;
27+
color: hsl(219, 9%, 45%);
28+
}
29+
30+
.product-page-cart-content {
31+
padding: 20px;
32+
display: flex;
33+
flex-direction: column;
34+
justify-content: center;
35+
}
36+
37+
.product-page-cart-item {
38+
display: flex;
39+
justify-content: space-between;
40+
color: hsl(219, 9%, 45%);
41+
align-items: center;
42+
}
43+
44+
.product-page-cart-item-img {
45+
width: 40px;
46+
height: 40px;
47+
}
48+
49+
.product-page-cart-item-title {
50+
font-size: 13px;
51+
margin-bottom: 5px;
52+
}
53+
54+
.product-page-cart-item-price {
55+
font-size: 13px;
56+
}
57+
58+
.product-page-cart-item-price > span {
59+
font-weight: 700;
60+
color: hsl(220, 13%, 13%);
61+
}
62+
63+
.product-page-cart-remove-item-btn {
64+
background-color: transparent;
65+
border: none;
66+
cursor: pointer;
67+
transition: all 0.2s ease;
68+
}
69+
70+
.product-page-cart-remove-item-btn:hover {
71+
filter: brightness(0.2);
72+
}
73+
74+
.product-page-cart-checkout-btn {
75+
padding: 10px 0px;
76+
border-radius: 5px;
77+
border: none;
78+
background-color: hsl(26, 100%, 55%);
79+
color: white;
80+
letter-spacing: 1px;
81+
margin-top: 20px;
82+
transition: all 0.2s ease;
83+
cursor: pointer;
84+
}
85+
86+
.product-page-cart-checkout-btn:hover {
87+
background-color: hsla(26, 100%, 55%, 0.75);
88+
}
89+
90+
@media only screen and (max-width: 500px) {
91+
.product-page-cart-container {
92+
top: 80px;
93+
left: 10px;
94+
right: 10px;
95+
width: auto;
96+
}
97+
98+
.product-page-cart-item-details {
99+
margin-right: auto;
100+
margin-left: 15px;
101+
}
102+
103+
.product-page-cart-checkout-btn {
104+
padding: 15px 0px;
105+
}
106+
}
Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React from 'react'
2+
import './Cart.css'
3+
import deleteIcon from './assets/ecommerce-product-page-main/images/icon-delete.svg'
4+
import {product} from './data.js'
5+
6+
const Cart = ({cartItems, setCartItems, setShowCart}) => {
7+
return (
8+
<div className="product-page-cart-container">
9+
<h5 className="product-page-cart-title">Cart</h5>
10+
{
11+
cartItems === '' ?
12+
13+
<p className="product-page-empty-cart">
14+
Your cart is empty
15+
</p>
16+
:
17+
18+
<div className="product-page-cart-content">
19+
{
20+
cartItems.map((item)=>(
21+
<div className="product-page-cart-item">
22+
<img src={item?.thumbnail} alt="" className="product-page-cart-item-img" />
23+
<div className="product-page-cart-item-details">
24+
<div className="product-page-cart-item-title">{item?.title}</div>
25+
<div className="product-page-cart-item-price">
26+
125ドル.00 x {item?.amount} <span>${item?.amount * 125}.00</span>
27+
</div>
28+
</div>
29+
<button className="product-page-cart-remove-item-btn">
30+
<img src={deleteIcon} alt="" onClick={()=>setCartItems('')} />
31+
</button>
32+
</div>
33+
))
34+
}
35+
<button className="product-page-cart-checkout-btn" onClick={()=>setShowCart(false)}>
36+
Checkout
37+
</button>
38+
</div>
39+
}
40+
</div>
41+
)
42+
}
43+
44+
export default Cart
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* HAMBURGER */
2+
3+
.product-page-nav-toggle {
4+
display: none;
5+
-webkit-box-pack: center;
6+
justify-content: center;
7+
-webkit-box-align: center;
8+
align-items: center;
9+
width: 18px;
10+
height: 21px;
11+
background-color: transparent;
12+
border: none;
13+
cursor: pointer;
14+
15+
margin-top: 3px;
16+
margin-right: 15px;
17+
z-index: 1000;
18+
}
19+
20+
.product-page-nav-toggle-hamburger {
21+
width: 18px;
22+
height: 3px;
23+
transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
24+
display: block;
25+
position: absolute;
26+
background-color: hsl(219, 9%, 45%);
27+
}
28+
29+
.product-page-nav-toggle-hamburger::before,
30+
.product-page-nav-toggle-hamburger::after {
31+
content: "";
32+
position: absolute;
33+
display: block;
34+
35+
width: 18px;
36+
height: 3px;
37+
38+
background-color: hsl(219, 9%, 45%);
39+
}
40+
41+
.product-page-nav-toggle-hamburger::before {
42+
top: -7px;
43+
transition: top 0.1s 0.25s ease-in, opacity 0.1s ease-in;
44+
}
45+
46+
.product-page-nav-toggle-hamburger::after {
47+
bottom: -7px;
48+
transition: bottom 0.1s 0.25s ease-in,
49+
transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
50+
}
51+
52+
/* HAMBURGER ACTIVE */
53+
54+
.product-page-nav-toggle-hamburger-active {
55+
transform: rotate(225deg);
56+
transition-delay: 0.12s;
57+
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
58+
}
59+
60+
.product-page-nav-toggle-hamburger-active::before {
61+
top: 0;
62+
opacity: 0;
63+
transition: top 0.1s ease-out, opacity 0.1s 0.12s ease-out;
64+
}
65+
66+
.product-page-nav-toggle-hamburger-active::after {
67+
bottom: 0;
68+
transform: rotate(-90deg);
69+
transition: bottom 0.1s ease-out,
70+
transform 0.22s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);
71+
}
72+
73+
@media only screen and (max-width: 800px) {
74+
.product-page-nav-toggle {
75+
display: flex;
76+
}
77+
}
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import './Hamburger.css'
3+
4+
const Hamburger = ({toggleMenu,showMenu}) => {
5+
6+
return (
7+
<button className='product-page-nav-toggle'
8+
onClick={toggleMenu}>
9+
<span className={showMenu ? 'product-page-nav-toggle-hamburger product-page-nav-toggle-hamburger-active' : 'product-page-nav-toggle-hamburger'}></span>
10+
</button>
11+
)
12+
}
13+
14+
export default Hamburger

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /