Skip to content

Commit 765ae65

Browse files
MAKUSrefMAKUSref
committed
Add examples
1 parent d70d02c commit 765ae65

File tree

12 files changed

+1140
-0
lines changed

12 files changed

+1140
-0
lines changed

‎src/App.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,36 @@ export default function App() {
1010
Basic
1111
</MDBBtn>
1212
</Link>
13+
<Link to="/quantity">
14+
<MDBBtn className="m-3">
15+
Quantity edit
16+
</MDBBtn>
17+
</Link>
18+
<Link to="/payment">
19+
<MDBBtn className="m-3">
20+
Payment methods
21+
</MDBBtn>
22+
</Link>
23+
<Link to="/product-cards">
24+
<MDBBtn className="m-3">
25+
Product Cards
26+
</MDBBtn>
27+
</Link>
28+
<Link to="/cart-checkout">
29+
<MDBBtn className="m-3">
30+
Cart checkout
31+
</MDBBtn>
32+
</Link>
33+
<Link to="/review-page">
34+
<MDBBtn className="m-3">
35+
Review Page
36+
</MDBBtn>
37+
</Link>
38+
<Link to="/summary-page">
39+
<MDBBtn className="m-3">
40+
Summary Page
41+
</MDBBtn>
42+
</Link>
1343
</MDBContainer>
1444
);
1545
}

‎src/cartCheckout/CartCheckout.js‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
import React from 'react';
2+
import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCol, MDBContainer, MDBIcon, MDBInput, MDBRow, MDBTypography } from 'mdb-react-ui-kit';
3+
import './cartCheckout.css';
4+
5+
export default function CartCheckout() {
6+
return (
7+
<section className="h-100 h-custom" style={{ backgroundColor: '#eee' }}>
8+
<MDBContainer className="h-100 py-5">
9+
<MDBRow className="justify-content-center align-items-center h-100">
10+
<MDBCol>
11+
<MDBCard className="shopping-cart" style={{ borderRadius: '15px' }}>
12+
<MDBCardBody className="text-black">
13+
<MDBRow>
14+
<MDBCol lg="7" className="px-5 py-4">
15+
<MDBTypography tag="h3" className="mb-5 pt-2 text-center fw-bold text-uppercase">Your products</MDBTypography>
16+
17+
<div className="d-flex align-items-center mb-5">
18+
<div className="flex-shrink-0">
19+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/13.webp"
20+
fluid style={{ width: '150px' }} alt="Generic placeholder image" />
21+
</div>
22+
23+
<div className="flex-grow-1 ms-3">
24+
<a href="#!" className="float-end text-black">
25+
<MDBIcon fas icon="times" />
26+
</a>
27+
<MDBTypography tag="h5" className="text-primary">Samsung Galaxy M11 64GB</MDBTypography>
28+
<MDBTypography tag="h6" style={{ color: '#9e9e9e' }}>Color: white</MDBTypography>
29+
30+
<div className="d-flex align-items-center">
31+
<p className="fw-bold mb-0 me-5 pe-3">799$</p>
32+
33+
<div className="def-number-input number-input safari_only">
34+
<button className="minus"></button>
35+
<input className="quantity fw-bold text-black" min={0} defaultValue={1} type="number" />
36+
<button className="plus"></button>
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<div className="d-flex align-items-center mb-5">
43+
<div className="flex-shrink-0">
44+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/6.webp"
45+
fluid style={{ width: '150px' }} alt="Generic placeholder image" />
46+
</div>
47+
48+
<div className="flex-grow-1 ms-3">
49+
<a href="#!" className="float-end text-black">
50+
<MDBIcon fas icon="times" />
51+
</a>
52+
<MDBTypography tag="h5" className="text-primary">Headphones Bose 35 II</MDBTypography>
53+
<MDBTypography tag="h6" style={{ color: '#9e9e9e' }}>Color: red</MDBTypography>
54+
55+
<div className="d-flex align-items-center">
56+
<p className="fw-bold mb-0 me-5 pe-3">239$</p>
57+
58+
<div className="def-number-input number-input safari_only">
59+
<button className="minus"></button>
60+
<input className="quantity fw-bold text-black" min={0} defaultValue={1} type="number" />
61+
<button className="plus"></button>
62+
</div>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<div className="d-flex align-items-center mb-5">
68+
<div className="flex-shrink-0">
69+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Products/1.webp"
70+
fluid style={{ width: '150px' }} alt="Generic placeholder image" />
71+
</div>
72+
73+
<div className="flex-grow-1 ms-3">
74+
<a href="#!" className="float-end text-black">
75+
<MDBIcon fas icon="times" />
76+
</a>
77+
<MDBTypography tag="h5" className="text-primary">iPad 9.7 6-gen WiFi 32GB</MDBTypography>
78+
<MDBTypography tag="h6" style={{ color: '#9e9e9e' }}>Color: rose pink</MDBTypography>
79+
80+
<div className="d-flex align-items-center">
81+
<p className="fw-bold mb-0 me-5 pe-3">659$</p>
82+
83+
<div className="def-number-input number-input safari_only">
84+
<button className="minus"></button>
85+
<input className="quantity fw-bold text-black" min={0} defaultValue={2} type="number" />
86+
<button className="plus"></button>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
92+
<hr className="mb-4" style={{ height: '2px', backgroundColor: '#1266f1', opacity: 1 }} />
93+
94+
<div className="d-flex justify-content-between px-x">
95+
<p className="fw-bold">Discount:</p>
96+
<p className="fw-bold">95$</p>
97+
</div>
98+
<div className="d-flex justify-content-between p-2 mb-2" style={{ backgroundColor: '#e1f5fe' }}>
99+
<MDBTypography tag="h5" className="fw-bold mb-0">Total:</MDBTypography>
100+
<MDBTypography tag="h5" className="fw-bold mb-0">2261$</MDBTypography>
101+
</div>
102+
</MDBCol>
103+
<MDBCol lg="5" className="px-5 py-4">
104+
<MDBTypography tag="h3" className="mb-5 pt-2 text-center fw-bold text-uppercase">Payment</MDBTypography>
105+
106+
<form className="mb-5">
107+
<MDBInput
108+
className="mb-5"
109+
label="Card number"
110+
type='text'
111+
size='lg'
112+
defaultValue="1234 5678 9012 3457"
113+
/>
114+
115+
<MDBInput
116+
className="mb-5"
117+
label="Name on card"
118+
type='text'
119+
size='lg'
120+
defaultValue="John Smith"
121+
/>
122+
123+
<MDBRow>
124+
<MDBCol md="6" className="mb-5">
125+
<MDBInput
126+
className="mb-4"
127+
label="Expiration"
128+
type='text'
129+
size='lg'
130+
minLength="7"
131+
maxLength="7"
132+
defaultValue="01/22"
133+
placeholder="MM/YYYY"
134+
/>
135+
</MDBCol>
136+
<MDBCol md="6" className="mb-5">
137+
<MDBInput
138+
className="mb-4"
139+
label="Cvv"
140+
type='text'
141+
size='lg'
142+
minLength="3"
143+
maxLength="3"
144+
placeholder="&#9679;&#9679;&#9679;"
145+
defaultValue="&#9679;&#9679;&#9679;"
146+
/>
147+
</MDBCol>
148+
</MDBRow>
149+
150+
<p className="mb-5">
151+
Lorem ipsum dolor sit amet consectetur, adipisicing elit
152+
<a href="#!"> obcaecati sapiente</a>.
153+
</p>
154+
155+
<MDBBtn block size="lg">Buy now</MDBBtn>
156+
157+
<MDBTypography tag="h5" className="fw-bold mb-5" style={{ position: 'absolute', bottom: '0' }}>
158+
<a href="#!">
159+
<MDBIcon fas icon="angle-left me-2" />Back to shopping
160+
</a>
161+
</MDBTypography>
162+
</form>
163+
</MDBCol>
164+
</MDBRow>
165+
</MDBCardBody>
166+
</MDBCard>
167+
</MDBCol>
168+
</MDBRow>
169+
</MDBContainer>
170+
</section>
171+
);
172+
}

‎src/cartCheckout/cartCheckout.css‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
@media (min-width: 1025px) {
2+
.h-custom {
3+
height: 100vh !important;
4+
}
5+
}
6+
7+
.number-input input[type="number"] {
8+
-webkit-appearance: textfield;
9+
-moz-appearance: textfield;
10+
appearance: textfield;
11+
}
12+
13+
.number-input input[type=number]::-webkit-inner-spin-button,
14+
.number-input input[type=number]::-webkit-outer-spin-button {
15+
-webkit-appearance: none;
16+
}
17+
18+
.number-input button {
19+
-webkit-appearance: none;
20+
background-color: transparent;
21+
border: none;
22+
align-items: center;
23+
justify-content: center;
24+
cursor: pointer;
25+
margin: 0;
26+
position: relative;
27+
}
28+
29+
.number-input button:before,
30+
.number-input button:after {
31+
display: inline-block;
32+
position: absolute;
33+
content: '';
34+
height: 2px;
35+
transform: translate(-50%, -50%);
36+
}
37+
38+
.number-input button.plus:after {
39+
transform: translate(-50%, -50%) rotate(90deg);
40+
}
41+
42+
.number-input input[type=number] {
43+
text-align: center;
44+
}
45+
46+
.number-input.number-input {
47+
border: 1px solid #ced4da;
48+
width: 10rem;
49+
border-radius: .25rem;
50+
}
51+
52+
.number-input.number-input button {
53+
width: 2.6rem;
54+
height: .7rem;
55+
}
56+
57+
.number-input.number-input button.minus {
58+
padding-left: 10px;
59+
}
60+
61+
.number-input.number-input button:before,
62+
.number-input.number-input button:after {
63+
width: .7rem;
64+
background-color: #495057;
65+
}
66+
67+
.number-input.number-input input[type=number] {
68+
max-width: 4rem;
69+
padding: .5rem;
70+
border: 1px solid #ced4da;
71+
border-width: 0 1px;
72+
font-size: 1rem;
73+
height: 2rem;
74+
color: #495057;
75+
}
76+
77+
@media not all and (min-resolution:.001dpcm) {
78+
@supports (-webkit-appearance: none) and (stroke-color:transparent) {
79+
80+
.number-input.def-number-input.safari_only button:before,
81+
.number-input.def-number-input.safari_only button:after {
82+
margin-top: -.3rem;
83+
}
84+
}
85+
}
86+
87+
.shopping-cart .def-number-input.number-input {
88+
border: none;
89+
}
90+
91+
.shopping-cart .def-number-input.number-input input[type=number] {
92+
max-width: 2rem;
93+
border: none;
94+
}
95+
96+
.shopping-cart .def-number-input.number-input input[type=number].black-text,
97+
.shopping-cart .def-number-input.number-input input.btn.btn-link[type=number],
98+
.shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:hover,
99+
.shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:focus {
100+
color: #212529 !important;
101+
}
102+
103+
.shopping-cart .def-number-input.number-input button {
104+
width: 1rem;
105+
}
106+
107+
.shopping-cart .def-number-input.number-input button:before,
108+
.shopping-cart .def-number-input.number-input button:after {
109+
width: .5rem;
110+
}
111+
112+
.shopping-cart .def-number-input.number-input button.minus:before,
113+
.shopping-cart .def-number-input.number-input button.minus:after {
114+
background-color: #9e9e9e;
115+
}
116+
117+
.shopping-cart .def-number-input.number-input button.plus:before,
118+
.shopping-cart .def-number-input.number-input button.plus:after {
119+
background-color: #4285f4;
120+
}

‎src/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,12 @@ import reportWebVitals from './reportWebVitals';
55
import Basic from './basic/Basic';
66
import { BrowserRouter, Route, Routes } from 'react-router-dom';
77
import App from './App';
8+
import QuantityEdit from './quantityEdit/QuantityEdit';
9+
import PaymentMethods from './paymentMethods/PaymentMethods';
10+
import ProductCards from './productCards/ProductCards';
11+
import CartCheckout from './cartCheckout/CartCheckout';
12+
import ReviewPage from './reviewPage/ReviewPage';
13+
import SummaryPage from './summaryPage/SummaryPage';
814

915
const container = document.getElementById("root");
1016
const root = createRoot(container);
@@ -15,6 +21,12 @@ root.render(
1521
<Routes>
1622
<Route path="/" element={<App />} />
1723
<Route path="/basic" element={<Basic />} />
24+
<Route path="/quantity" element={<QuantityEdit />} />
25+
<Route path="/payment" element={<PaymentMethods />} />
26+
<Route path="/product-cards" element={<ProductCards />} />
27+
<Route path="/cart-checkout" element={<CartCheckout />} />
28+
<Route path="/review-page" element={<ReviewPage />} />
29+
<Route path="/summary-page" element={<SummaryPage />} />
1830
</Routes>
1931
</BrowserRouter>
2032
</React.StrictMode>

0 commit comments

Comments
 (0)