Skip to content

Commit 539d875

Browse files
MAKUSrefMAKUSref
committed
Format examples
1 parent 765ae65 commit 539d875

File tree

7 files changed

+799
-218
lines changed

7 files changed

+799
-218
lines changed

‎src/basic/Basic.js‎

Lines changed: 127 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
import { MDBBtn, MDBCard, MDBCardBody, MDBCardImage, MDBCol, MDBContainer, MDBIcon, MDBInput, MDBRow, MDBTypography } from 'mdb-react-ui-kit';
2-
import React from 'react';
3-
import './basic.css';
1+
import {
2+
MDBBtn,
3+
MDBCard,
4+
MDBCardBody,
5+
MDBCardImage,
6+
MDBCol,
7+
MDBContainer,
8+
MDBIcon,
9+
MDBInput,
10+
MDBRow,
11+
MDBTypography,
12+
} from "mdb-react-ui-kit";
13+
import React from "react";
14+
import "./basic.css";
415

516
export default function Basic() {
617
return (
7-
<section className="h-100 h-custom" style={{ backgroundColor: '#eee' }}>
18+
<section className="h-100 h-custom" style={{ backgroundColor: "#eee" }}>
819
<MDBContainer className="py-5 h-100">
920
<MDBRow className="justify-content-center align-items-center h-100">
1021
<MDBCol>
@@ -14,7 +25,8 @@ export default function Basic() {
1425
<MDBCol lg="7">
1526
<MDBTypography tag="h5">
1627
<a href="#!" className="text-body">
17-
<MDBIcon fas icon="long-arrow-alt-left me-2" /> Continue shopping
28+
<MDBIcon fas icon="long-arrow-alt-left me-2" /> Continue
29+
shopping
1830
</a>
1931
</MDBTypography>
2032

@@ -40,22 +52,36 @@ export default function Basic() {
4052
<div className="d-flex justify-content-between">
4153
<div className="d-flex flex-row align-items-center">
4254
<div>
43-
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
44-
fluid className="rounded-3" style={{ width: '65px' }} alt="Shopping item" />
55+
<MDBCardImage
56+
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img1.webp"
57+
fluid
58+
className="rounded-3"
59+
style={{ width: "65px" }}
60+
alt="Shopping item"
61+
/>
4562
</div>
4663
<div className="ms-3">
47-
<MDBTypography tag="h5">Iphone 11 pro</MDBTypography>
64+
<MDBTypography tag="h5">
65+
Iphone 11 pro
66+
</MDBTypography>
4867
<p className="small mb-0">256GB, Navy Blue</p>
4968
</div>
5069
</div>
5170
<div className="d-flex flex-row align-items-center">
52-
<div style={{ width: '50px' }}>
53-
<MDBTypography tag="h5" className="fw-normal mb-0" >2</MDBTypography>
71+
<div style={{ width: "50px" }}>
72+
<MDBTypography
73+
tag="h5"
74+
className="fw-normal mb-0"
75+
>
76+
2
77+
</MDBTypography>
5478
</div>
55-
<div style={{ width: '80px' }}>
56-
<MDBTypography tag="h5" className="mb-0" >$900</MDBTypography>
79+
<div style={{ width: "80px" }}>
80+
<MDBTypography tag="h5" className="mb-0">
81+
$900
82+
</MDBTypography>
5783
</div>
58-
<a href="#!" style={{ color: '#cecece' }}>
84+
<a href="#!" style={{ color: "#cecece" }}>
5985
<MDBIcon fas icon="trash-alt" />
6086
</a>
6187
</div>
@@ -68,22 +94,36 @@ export default function Basic() {
6894
<div className="d-flex justify-content-between">
6995
<div className="d-flex flex-row align-items-center">
7096
<div>
71-
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img2.webp"
72-
fluid className="rounded-3" style={{ width: '65px' }} alt="Shopping item" />
97+
<MDBCardImage
98+
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img2.webp"
99+
fluid
100+
className="rounded-3"
101+
style={{ width: "65px" }}
102+
alt="Shopping item"
103+
/>
73104
</div>
74105
<div className="ms-3">
75-
<MDBTypography tag="h5">Samsung galaxy Note 10</MDBTypography>
106+
<MDBTypography tag="h5">
107+
Samsung galaxy Note 10
108+
</MDBTypography>
76109
<p className="small mb-0">256GB, Navy Blue</p>
77110
</div>
78111
</div>
79112
<div className="d-flex flex-row align-items-center">
80-
<div style={{ width: '50px' }}>
81-
<MDBTypography tag="h5" className="fw-normal mb-0" >2</MDBTypography>
113+
<div style={{ width: "50px" }}>
114+
<MDBTypography
115+
tag="h5"
116+
className="fw-normal mb-0"
117+
>
118+
2
119+
</MDBTypography>
82120
</div>
83-
<div style={{ width: '80px' }}>
84-
<MDBTypography tag="h5" className="mb-0" >$900</MDBTypography>
121+
<div style={{ width: "80px" }}>
122+
<MDBTypography tag="h5" className="mb-0">
123+
$900
124+
</MDBTypography>
85125
</div>
86-
<a href="#!" style={{ color: '#cecece' }}>
126+
<a href="#!" style={{ color: "#cecece" }}>
87127
<MDBIcon fas icon="trash-alt" />
88128
</a>
89129
</div>
@@ -96,22 +136,36 @@ export default function Basic() {
96136
<div className="d-flex justify-content-between">
97137
<div className="d-flex flex-row align-items-center">
98138
<div>
99-
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img3.webp"
100-
fluid className="rounded-3" style={{ width: '65px' }} alt="Shopping item" />
139+
<MDBCardImage
140+
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img3.webp"
141+
fluid
142+
className="rounded-3"
143+
style={{ width: "65px" }}
144+
alt="Shopping item"
145+
/>
101146
</div>
102147
<div className="ms-3">
103-
<MDBTypography tag="h5">Canon EOS M50</MDBTypography>
148+
<MDBTypography tag="h5">
149+
Canon EOS M50
150+
</MDBTypography>
104151
<p className="small mb-0">Onyx Black</p>
105152
</div>
106153
</div>
107154
<div className="d-flex flex-row align-items-center">
108-
<div style={{ width: '50px' }}>
109-
<MDBTypography tag="h5" className="fw-normal mb-0" >1</MDBTypography>
155+
<div style={{ width: "50px" }}>
156+
<MDBTypography
157+
tag="h5"
158+
className="fw-normal mb-0"
159+
>
160+
1
161+
</MDBTypography>
110162
</div>
111-
<div style={{ width: '80px' }}>
112-
<MDBTypography tag="h5" className="mb-0" >$1199</MDBTypography>
163+
<div style={{ width: "80px" }}>
164+
<MDBTypography tag="h5" className="mb-0">
165+
$1199
166+
</MDBTypography>
113167
</div>
114-
<a href="#!" style={{ color: '#cecece' }}>
168+
<a href="#!" style={{ color: "#cecece" }}>
115169
<MDBIcon fas icon="trash-alt" />
116170
</a>
117171
</div>
@@ -124,22 +178,36 @@ export default function Basic() {
124178
<div className="d-flex justify-content-between">
125179
<div className="d-flex flex-row align-items-center">
126180
<div>
127-
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img4.webp"
128-
fluid className="rounded-3" style={{ width: '65px' }} alt="Shopping item" />
181+
<MDBCardImage
182+
src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-shopping-carts/img4.webp"
183+
fluid
184+
className="rounded-3"
185+
style={{ width: "65px" }}
186+
alt="Shopping item"
187+
/>
129188
</div>
130189
<div className="ms-3">
131-
<MDBTypography tag="h5">MacBook Pro</MDBTypography>
190+
<MDBTypography tag="h5">
191+
MacBook Pro
192+
</MDBTypography>
132193
<p className="small mb-0">1TB, Graphite</p>
133194
</div>
134195
</div>
135196
<div className="d-flex flex-row align-items-center">
136-
<div style={{ width: '50px' }}>
137-
<MDBTypography tag="h5" className="fw-normal mb-0" >1</MDBTypography>
197+
<div style={{ width: "50px" }}>
198+
<MDBTypography
199+
tag="h5"
200+
className="fw-normal mb-0"
201+
>
202+
1
203+
</MDBTypography>
138204
</div>
139-
<div style={{ width: '80px' }}>
140-
<MDBTypography tag="h5" className="mb-0" >$1799</MDBTypography>
205+
<div style={{ width: "80px" }}>
206+
<MDBTypography tag="h5" className="mb-0">
207+
$1799
208+
</MDBTypography>
141209
</div>
142-
<a href="#!" style={{ color: '#cecece' }}>
210+
<a href="#!" style={{ color: "#cecece" }}>
143211
<MDBIcon fas icon="trash-alt" />
144212
</a>
145213
</div>
@@ -152,9 +220,16 @@ export default function Basic() {
152220
<MDBCard className="bg-primary text-white rounded-3">
153221
<MDBCardBody>
154222
<div className="d-flex justify-content-between align-items-center mb-4">
155-
<MDBTypography tag="h5" className="mb-0" >Card details</MDBTypography>
156-
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
157-
fluid className="rounded-3" style={{ width: '45px' }} alt="Avatar" />
223+
<MDBTypography tag="h5" className="mb-0">
224+
Card details
225+
</MDBTypography>
226+
<MDBCardImage
227+
src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp"
228+
fluid
229+
className="rounded-3"
230+
style={{ width: "45px" }}
231+
alt="Avatar"
232+
/>
158233
</div>
159234

160235
<p className="small">Card type</p>
@@ -175,17 +250,17 @@ export default function Basic() {
175250
<MDBInput
176251
className="mb-4"
177252
label="Cardholder's Name"
178-
type='text'
179-
size='lg'
253+
type="text"
254+
size="lg"
180255
placeholder="Cardholder's Name"
181256
contrast
182257
/>
183258

184259
<MDBInput
185260
className="mb-4"
186261
label="Card Number"
187-
type='text'
188-
size='lg'
262+
type="text"
263+
size="lg"
189264
minLength="19"
190265
maxLength="19"
191266
placeholder="1234 5678 9012 3457"
@@ -197,8 +272,8 @@ export default function Basic() {
197272
<MDBInput
198273
className="mb-4"
199274
label="Expiration"
200-
type='text'
201-
size='lg'
275+
type="text"
276+
size="lg"
202277
minLength="7"
203278
maxLength="7"
204279
placeholder="MM/YYYY"
@@ -209,8 +284,8 @@ export default function Basic() {
209284
<MDBInput
210285
className="mb-4"
211286
label="Cvv"
212-
type='text'
213-
size='lg'
287+
type="text"
288+
size="lg"
214289
minLength="3"
215290
maxLength="3"
216291
placeholder="&#9679;&#9679;&#9679;"
@@ -240,7 +315,10 @@ export default function Basic() {
240315
<MDBBtn color="info" block size="lg">
241316
<div className="d-flex justify-content-between">
242317
<span>$4818.00</span>
243-
<span>Checkout <i className="fas fa-long-arrow-alt-right ms-2"></i></span>
318+
<span>
319+
Checkout{" "}
320+
<i className="fas fa-long-arrow-alt-right ms-2"></i>
321+
</span>
244322
</div>
245323
</MDBBtn>
246324
</MDBCardBody>

0 commit comments

Comments
 (0)