Skip to content

Commit 269a99f

Browse files
MAKUSrefMAKUSref
committed
Add examples
1 parent bfdd2d5 commit 269a99f

20 files changed

+628
-0
lines changed

‎.gitignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
build

‎License.pdf

252 KB
Binary file not shown.

‎package.json

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"name": "mdb-react-template",
3+
"version": "4.0.0",
4+
"description": "template for mdb-react-ui-kit",
5+
"private": true,
6+
"dependencies": {
7+
"mdb-react-ui-kit": "^4.0.0",
8+
"react": "^18.1.0",
9+
"react-dom": "^18.1.0",
10+
"react-router-dom": "^6.3.0",
11+
"react-scripts": "5.0.1",
12+
"web-vitals": "^2.1.4"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build",
17+
"test": "react-scripts test",
18+
"eject": "react-scripts eject"
19+
},
20+
"keywords": [
21+
"template",
22+
"react"
23+
],
24+
"author": "MDBootstrap",
25+
"license": "MIT",
26+
"browserslist": {
27+
"production": [
28+
">0.2%",
29+
"not dead",
30+
"not op_mini all"
31+
],
32+
"development": [
33+
"last 1 chrome version",
34+
"last 1 firefox version",
35+
"last 1 safari version"
36+
]
37+
}
38+
}

‎public/favicon.ico

3.78 KB
Binary file not shown.

‎public/index.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<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+
<link
14+
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
15+
rel="stylesheet"
16+
/>
17+
<link
18+
href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"
19+
rel="stylesheet"
20+
/>
21+
22+
<!--
23+
manifest.json provides metadata used when your web app is installed on a
24+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
25+
-->
26+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
27+
<!--
28+
Notice the use of %PUBLIC_URL% in the tags above.
29+
It will be replaced with the URL of the `public` folder during the build.
30+
Only files inside the `public` folder can be referenced from the HTML.
31+
32+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
33+
work correctly both with client-side routing and a non-root public URL.
34+
Learn how to configure a non-root public URL by running `npm run build`.
35+
-->
36+
<title>MDBReact5 Template App</title>
37+
</head>
38+
<body>
39+
<noscript>You need to enable JavaScript to run this app.</noscript>
40+
<div id="root"></div>
41+
<!--
42+
This HTML file is a template.
43+
If you open it directly in the browser, you will see an empty page.
44+
45+
You can add webfonts, meta tags, or analytics to this file.
46+
The build step will place the bundled scripts into the <body> tag.
47+
48+
To begin the development, run `npm start` or `yarn start`.
49+
To create a production bundle, use `npm run build` or `yarn build`.
50+
-->
51+
</body>
52+
</html>

‎public/logo192.png

5.22 KB
Loading

‎public/logo512.png

9.44 KB
Loading

‎public/manifest.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"short_name": "React App",
3+
"name": "Create React App Sample",
4+
"icons": [
5+
{
6+
"src": "favicon.ico",
7+
"sizes": "64x64 32x32 24x24 16x16",
8+
"type": "image/x-icon"
9+
},
10+
{
11+
"src": "logo192.png",
12+
"type": "image/png",
13+
"sizes": "192x192"
14+
},
15+
{
16+
"src": "logo512.png",
17+
"type": "image/png",
18+
"sizes": "512x512"
19+
}
20+
],
21+
"start_url": ".",
22+
"display": "standalone",
23+
"theme_color": "#000000",
24+
"background_color": "#ffffff"
25+
}

‎public/robots.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎src/App.js

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { MDBBtn, MDBContainer } from "mdb-react-ui-kit";
2+
import React from "react";
3+
import { Link } from "react-router-dom";
4+
5+
export default function App() {
6+
return (
7+
<MDBContainer className="d-flex justify-content-center">
8+
<Link to="/basic">
9+
<MDBBtn className="m-3">
10+
Basic
11+
</MDBBtn>
12+
</Link>
13+
<Link to="/delivery">
14+
<MDBBtn className="m-3">
15+
Delivery address form card
16+
</MDBBtn>
17+
</Link>
18+
<Link to="/advanced">
19+
<MDBBtn className="m-3">
20+
Advanced address form
21+
</MDBBtn>
22+
</Link>
23+
<Link to="/image">
24+
<MDBBtn className="m-3">
25+
Address form with image
26+
</MDBBtn>
27+
</Link>
28+
</MDBContainer>
29+
);
30+
}

‎src/advanced/Advanced.js

+133
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
import React from 'react';
2+
import './advanced.css';
3+
import { MDBAccordion, MDBAccordionItem, MDBBtn, MDBCard, MDBCardBody, MDBCardFooter, MDBCardHeader, MDBCardImage, MDBCheckbox, MDBCol, MDBContainer, MDBInput, MDBListGroup, MDBListGroupItem, MDBRow, MDBTextArea, MDBTypography } from 'mdb-react-ui-kit';
4+
5+
export default function Advanced() {
6+
return (
7+
<MDBContainer className="my-5 py-5" style={{maxWidth: '1100px'}}>
8+
<section>
9+
<MDBRow>
10+
<MDBCol md="8">
11+
<MDBCard className="mb-4">
12+
<MDBCardBody>
13+
<p className="text-uppercase h4 text-font">Delivery Country:</p>
14+
<MDBRow>
15+
<MDBCol md="1">
16+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Others/extended-example/usa2.webp"
17+
className="rounded-circle me-2"
18+
style={{ width: '35px' }}
19+
alt="USA" />
20+
</MDBCol>
21+
<MDBCol md="8">
22+
{/* PRO NEEDED */}
23+
<select className="custom-select">
24+
<option value="1">United States</option>
25+
<option value="2">Spain</option>
26+
<option value="3">Poland</option>
27+
<option value="4">Italy</option>
28+
<option value="5">Greece</option>
29+
<option value="6">Germany</option>
30+
<option value="7">Croatia</option>
31+
<option value="8">Sweden</option>
32+
</select>
33+
</MDBCol>
34+
</MDBRow>
35+
</MDBCardBody>
36+
</MDBCard>
37+
38+
<MDBAccordion className="card mb-4">
39+
<MDBAccordionItem collapseId={1} className="border-0" headerTitle='Promo/Student Code or Vouchers'>
40+
<MDBInput label='Enter code' type='text' />
41+
</MDBAccordionItem>
42+
</MDBAccordion>
43+
44+
<MDBCard className="mb-4">
45+
<MDBCardBody>
46+
<p className="text-uppercase fw-bold mb-3 text-font">Email address</p>
47+
<MDBRow>
48+
<MDBCol md="4">
49+
<p>your-email@gmail.com</p>
50+
</MDBCol>
51+
<MDBCol md="7">
52+
<MDBBtn outline color="dark" className="float-end button-color">Change</MDBBtn>
53+
</MDBCol>
54+
</MDBRow>
55+
</MDBCardBody>
56+
</MDBCard>
57+
</MDBCol>
58+
<MDBCol md="4" className="mb-4 position-statics">
59+
<MDBCard className="mb-4">
60+
<MDBCardHeader className="py-3">
61+
<MDBTypography tag="h5" className="mb-0 text-font">
62+
1 item <span className="float-end mt-1" style={{ fontSize: '13px' }}>Edit</span>
63+
</MDBTypography>
64+
</MDBCardHeader>
65+
<MDBCardBody>
66+
<MDBRow>
67+
<MDBCol md="4">
68+
<MDBCardImage src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
69+
className="rounded-3" style={{ width: '100px' }} alt="Blue Jeans Jacket" />
70+
</MDBCol>
71+
<MDBCol md="6" className="ms-3">
72+
<span className="mb-0 text-price">$35.00</span>
73+
<p className="mb-0 text-descriptions">Denim jacket </p>
74+
<span className="text-descriptions fw-bold">Black</span> <span
75+
className="text-descriptions fw-bold">UK 8</span>
76+
<p className="text-descriptions mt-0">
77+
Qty:<span className="text-descriptions fw-bold">1</span>
78+
</p>
79+
</MDBCol>
80+
</MDBRow>
81+
</MDBCardBody>
82+
<MDBCardFooter className="mt-4">
83+
<MDBListGroup flush>
84+
<MDBListGroupItem className="d-flex justify-content-between align-items-center border-0 px-0 pb-0 text-muted">
85+
Subtotal
86+
<span>$35.00</span>
87+
</MDBListGroupItem>
88+
<MDBListGroupItem className="d-flex justify-content-between align-items-center px-0 fw-bold text-uppercase">
89+
Total to pay
90+
<span>$35.00</span>
91+
</MDBListGroupItem>
92+
</MDBListGroup>
93+
</MDBCardFooter>
94+
</MDBCard>
95+
</MDBCol>
96+
97+
<MDBCol md="8" className="mb-4">
98+
<MDBCard className="mb-4">
99+
<MDBCardHeader className="py-3">
100+
<MDBTypography tag="h5" className="mb-0 text-font text-uppercase">Delivery address</MDBTypography>
101+
</MDBCardHeader>
102+
<MDBCardBody>
103+
<form>
104+
<MDBRow className="mb-4">
105+
<MDBCol>
106+
<MDBInput label='First name' type='text' />
107+
</MDBCol>
108+
<MDBCol>
109+
<MDBInput label='Last name' type='text' />
110+
</MDBCol>
111+
</MDBRow>
112+
113+
<MDBInput label='Company name' type='text' className="mb-4" />
114+
<MDBInput label='Address' type='text' className="mb-4" />
115+
<MDBInput label='Email' type='text' className="mb-4" />
116+
<MDBInput label='Phone' type='text' className="mb-4" />
117+
<MDBTextArea label='Additional information' rows={4} className="mb-4" />
118+
119+
<div className="d-flex justify-content-center">
120+
<MDBCheckbox name='flexCheck' value='' id='flexCheckChecked' label='Create an account?' defaultChecked />
121+
</div>
122+
</form>
123+
</MDBCardBody>
124+
</MDBCard>
125+
<div className="text-center">
126+
<MDBBtn className="button-order col-md-10">Place order</MDBBtn>
127+
</div>
128+
</MDBCol>
129+
</MDBRow>
130+
</section>
131+
</MDBContainer>
132+
);
133+
}

‎src/advanced/advanced.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.text-font {
2+
font-family: futura-pt, Tahoma, Geneva, Verdana, Arial, sans-serif;
3+
font-weight: 700;
4+
letter-spacing: .156rem;
5+
font-size: 1.125rem;
6+
}
7+
8+
.text-price {
9+
padding: 0 .625rem;
10+
font-family: futura-pt, Tahoma, Geneva, Verdana, Arial, sans-serif;
11+
font-style: normal;
12+
font-size: .75rem;
13+
font-weight: 700;
14+
line-height: .813rem;
15+
letter-spacing: 1.6px;
16+
}
17+
18+
.text-descriptions {
19+
font-family: futura-pt, Tahoma, Geneva, Verdana, Arial, sans-serif;
20+
font-style: normal;
21+
font-size: .75rem;
22+
font-weight: 400;
23+
line-height: 1.125rem;
24+
margin: .313rem 0 .938rem;
25+
padding: 0 .625rem;
26+
}
27+
28+
.button-color {
29+
color: #4e4e4e;
30+
border-color: #4e4e4e;
31+
}
32+
33+
.button-order {
34+
font-family: futura-pt, Tahoma, Geneva, Verdana, Arial, sans-serif;
35+
font-style: normal;
36+
font-size: .75rem;
37+
font-weight: 700;
38+
background-color: hsl(90, 40%, 50%);
39+
color: white;
40+
}
41+
42+
.custom-select {
43+
width: 100%;
44+
height: 36px;
45+
}

0 commit comments

Comments
 (0)