├── src
    ├── App.css
    ├── assets
    │   ├── img-1.jpg
    │   └── mdb-react.png
    ├── App.test.js
    ├── index.js
    ├── App.js
    ├── components
    │   ├── pages
    │   │   ├── sections
    │   │   │   ├── MapSection.js
    │   │   │   ├── BreadcrumSection.js
    │   │   │   ├── TableSection.js
    │   │   │   ├── AdminCardSection2.js
    │   │   │   ├── AdminCardSection1.js
    │   │   │   ├── ChartSection2.js
    │   │   │   ├── ChartSection1.js
    │   │   │   └── ModalSection.js
    │   │   ├── NotFoundPage.js
    │   │   ├── DashboardPage.js
    │   │   ├── MapsPage.js
    │   │   ├── TablesPage.js
    │   │   └── ProfilePage.js
    │   ├── Routes.js
    │   ├── Footer.js
    │   ├── sideNavigation.js
    │   └── topNavigation.js
    ├── logo.svg
    ├── index.css
    └── registerServiceWorker.js
├── license.pdf
├── .gitignore
├── README.md
├── public
    ├── manifest.json
    └── index.html
└── package.json


/src/App.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/license.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdbootstrap/Admin-Dashboard-Template-React-Bootstrap/HEAD/license.pdf


--------------------------------------------------------------------------------
/src/assets/img-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdbootstrap/Admin-Dashboard-Template-React-Bootstrap/HEAD/src/assets/img-1.jpg


--------------------------------------------------------------------------------
/src/assets/mdb-react.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mdbootstrap/Admin-Dashboard-Template-React-Bootstrap/HEAD/src/assets/mdb-react.png


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | it('renders without crashing', () => {
 6 |   const div = document.createElement('div');
 7 |   ReactDOM.render(<App />, div);
 8 |   ReactDOM.unmountComponentAtNode(div);
 9 | });
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | 
 6 | # testing
 7 | /coverage
 8 | 
 9 | # misc
10 | .DS_Store
11 | .env.local
12 | .env.development.local
13 | .env.test.local
14 | .env.production.local
15 | 
16 | npm-debug.log*
17 | yarn-debug.log*
18 | yarn-error.log*
19 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # mdbreact-admin-template-free
 2 | 
 3 | > MDB - React Admin Dashboard Free
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | yarn
10 | 
11 | # serve with hot reload at localhost:8080
12 | yarn start
13 | 
14 | # build for production with minification
15 | yarn build
16 | 
17 | # build for production and view the bundle analyzer report
18 | yarn build --report
19 | ```


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 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 |   "start_url": "./index.html",
12 |   "display": "standalone",
13 |   "theme_color": "#000000",
14 |   "background_color": "#ffffff"
15 | }
16 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import '@fortawesome/fontawesome-free/css/all.min.css';
 4 | import 'bootstrap-css-only/css/bootstrap.min.css';
 5 | import 'mdbreact/dist/css/mdb.css';
 6 | import './index.css';
 7 | import App from './App';
 8 | import registerServiceWorker from './registerServiceWorker';
 9 | import { BrowserRouter as Router } from 'react-router-dom';
10 | 
11 | 
12 | ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));
13 | registerServiceWorker();
14 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import Routes from '../src/components/Routes';
 3 | import TopNavigation from './components/topNavigation';
 4 | import SideNavigation from './components/sideNavigation';
 5 | import Footer from './components/Footer';
 6 | import './index.css';
 7 | 
 8 | class App extends Component {
 9 |   
10 |   render() {
11 |     return (
12 |         <div className="flexible-content">
13 |           <TopNavigation />
14 |           <SideNavigation />
15 |           <main id="content" className="p-5">
16 |             <Routes />
17 |           </main>
18 |           <Footer />
19 |         </div>
20 |     );
21 |   }
22 | }
23 | 
24 | export default App;
25 | 


--------------------------------------------------------------------------------
/src/components/pages/sections/MapSection.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MDBCol, MDBCard, MDBCardBody, MDBCardHeader} from 'mdbreact';
 3 | import GoogleMapReact from 'google-map-react';
 4 | 
 5 | const MapSection = () => {
 6 |   return (
 7 |       <MDBCol lg="6" className="mb-4">
 8 |         <MDBCard>
 9 |           <MDBCardHeader>Google Map</MDBCardHeader>
10 |           <MDBCardBody style={{width: '100%', height: '300px'}} className="text-center">
11 |             <GoogleMapReact
12 |               defaultCenter={{lat: 10, lng: 10}}
13 |               defaultZoom={7}
14 |               />
15 |           </MDBCardBody>
16 |         </MDBCard>
17 |       </MDBCol>
18 |   )
19 | }
20 | 
21 | export default MapSection;
22 | 
23 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mdb-react-admin-template",
 3 |   "version": "1.0.0",
 4 |   "description": "MDB - React Admin Dashboard Free",
 5 |   "author": "MDBootstrap <support@mdbootstrap.com>",
 6 |   "license": "MIT",
 7 |   "dependencies": {
 8 |     "google-map-react": "^1.0.6",
 9 |     "mdbreact": "^4.9.0",
10 |     "react": "^16.7.0",
11 |     "react-dom": "^16.7.0",
12 |     "react-router-dom": "^4.3.1",
13 |     "react-scripts": "2.1.3"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test --env=jsdom",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "browserslist": [
22 |     ">0.2%",
23 |     "not dead",
24 |     "not ie <= 11",
25 |     "not op_mini all"
26 |   ]
27 | }


--------------------------------------------------------------------------------
/src/components/Routes.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Route, Switch } from 'react-router-dom';
 3 | import DashboardPage from './pages/DashboardPage';
 4 | import ProfilePage from './pages/ProfilePage';
 5 | import TablesPage from './pages/TablesPage';
 6 | import MapsPage from './pages/MapsPage';
 7 | import NotFoundPage from './pages/NotFoundPage';
 8 | 
 9 | class Routes extends React.Component {
10 |   render() {
11 |     return (
12 |       <Switch>
13 |         <Route path='/' exact component={DashboardPage} />
14 |         <Route path='/dashboard' component={DashboardPage} />
15 |         <Route path='/profile' component={ProfilePage} />
16 |         <Route path='/tables' component={TablesPage} />
17 |         <Route path='/maps' component={MapsPage} />
18 |         <Route path='/404' component={NotFoundPage} />
19 |       </Switch>
20 |     );
21 |   }
22 | }
23 | 
24 | export default Routes;
25 | 


--------------------------------------------------------------------------------
/src/components/pages/NotFoundPage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { MDBCol, MDBRow } from 'mdbreact';
 3 | import logo from "../../assets/mdb-react.png";
 4 | 
 5 | 
 6 | const NotFoundPage =  () => {
 7 |   return (
 8 |     <React.Fragment>
 9 |       <div className="full">
10 |         <MDBRow className="bad-gateway-row">
11 |           <MDBCol md="8">
12 |             <img alt="Error 404" className="img-fluid" hieght="20px" src={logo}/>
13 |             <h2 className="h2-responsive mt-3 mb-2">404. That's an error.</h2>
14 |             <h4>The requested URL was not found on this server.</h4>
15 |           </MDBCol>
16 |           <MDBCol md="4">
17 |             <img alt="Error 404" className="img-fluid" src="https://mdbootstrap.com/img/Others/grafika404-bf.png"/>
18 |           </MDBCol>
19 |         </MDBRow>
20 |       </div>
21 |     </React.Fragment>
22 |   )
23 | }
24 | 
25 | export default NotFoundPage;


--------------------------------------------------------------------------------
/src/components/pages/DashboardPage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MDBRow } from 'mdbreact';
 3 | import AdminCardSection1 from './sections/AdminCardSection1';
 4 | import AdminCardSection2 from './sections/AdminCardSection2';
 5 | import TableSection from './sections/TableSection';
 6 | import BreadcrumSection from './sections/BreadcrumSection';
 7 | import ChartSection1 from './sections/ChartSection1';
 8 | import ChartSection2 from './sections/ChartSection2';
 9 | import MapSection from './sections/MapSection';
10 | import ModalSection from './sections/ModalSection';
11 | 
12 | const DashboardPage =  () => {
13 |   return (
14 |     <React.Fragment>
15 |       <BreadcrumSection />
16 |       <AdminCardSection1 />
17 |       <ChartSection1 />
18 |       <TableSection />
19 |       <ChartSection2 />
20 |       <MDBRow className="mb-4">
21 |           <MapSection />
22 |           <ModalSection />
23 |       </MDBRow>
24 |       <AdminCardSection2 />
25 |     </React.Fragment>
26 |   )
27 | }
28 | 
29 | export default DashboardPage;


--------------------------------------------------------------------------------
/src/components/pages/sections/BreadcrumSection.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MDBCard, MDBCardBody, MDBIcon, MDBBreadcrumb, MDBBreadcrumbItem, MDBFormInline, MDBBtn } from 'mdbreact';
 3 | 
 4 | const BreadcrumSection = () => {
 5 |   return (
 6 |     <MDBCard className="mb-5">
 7 |         <MDBCardBody id="breadcrumb" className="d-flex align-items-center justify-content-between">
 8 |             <MDBBreadcrumb>
 9 |                 <MDBBreadcrumbItem>Home</MDBBreadcrumbItem>
10 |                 <MDBBreadcrumbItem active>Dashboard</MDBBreadcrumbItem>
11 |             </MDBBreadcrumb>
12 |             <MDBFormInline className="md-form m-0">
13 |                 <input className="form-control form-control-sm" type="search" placeholder="Type your query" aria-label="Search"/>
14 |                 <MDBBtn size="sm" color="primary" className="my-0" type="submit"><MDBIcon icon="search" /></MDBBtn>
15 |             </MDBFormInline>
16 |         </MDBCardBody>
17 |     </MDBCard>
18 |   )
19 | }
20 | 
21 | export default BreadcrumSection;
22 | 
23 | 


--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MDBFooter, MDBBtn, MDBIcon } from 'mdbreact';
 3 | 
 4 | const Footer = () => {
 5 |     return (
 6 |         <MDBFooter color="blue" className="text-center font-small darken-2">
 7 |             <div className="pt-4">
 8 |                 <MDBBtn outline color="white" tag="a" href="https://mdbootstrap.com/docs/react/getting-started/download/" target="_blank">Download MDB<MDBIcon icon="download" className="ml-2"/></MDBBtn>
 9 |                 <MDBBtn outline color="white" tag="a" href="https://mdbootstrap.com/docs/react/getting-started/quick-start/" target="_blank">Start free tutorial<MDBIcon icon="graduation-cap" className="ml-2"/></MDBBtn>
10 |                 <hr className="my4"/>
11 |             </div>
12 |             <div className="pb-4">
13 |                 <MDBIcon fab icon="facebook" className="mr-3"/>
14 |                 <MDBIcon fab icon="twitter" className="mr-3"/>
15 |                 <MDBIcon fab icon="youtube" className="mr-3"/>
16 |                 <MDBIcon fab icon="google-plus" className="mr-3"/>
17 |                 <MDBIcon fab icon="dribbble" className="mr-3"/>
18 |                 <MDBIcon fab icon="pinterest" className="mr-3"/>
19 |                 <MDBIcon fab icon="github" className="mr-3"/>
20 |                 <MDBIcon fab icon="codepen" className="mr-3"/>
21 |             </div>
22 |             <p className="footer-copyright mb-0 py-3 text-center">
23 |                 &copy; {new Date().getFullYear()} Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
24 |             </p>
25 |         </MDBFooter>
26 |     );
27 | }
28 | 
29 | export default Footer;


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 6 |     <meta name="theme-color" content="#000000">
 7 |     <!--
 8 |       manifest.json provides metadata used when your web app is added to the
 9 |       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
10 |     -->
11 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
12 |     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
13 |     <!--
14 |       Notice the use of %PUBLIC_URL% in the tags above.
15 |       It will be replaced with the URL of the `public` folder during the build.
16 |       Only files inside the `public` folder can be referenced from the HTML.
17 | 
18 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
19 |       work correctly both with client-side routing and a non-root public URL.
20 |       Learn how to configure a non-root public URL by running `npm run build`.
21 |     -->
22 |     <title>React App</title>
23 |   </head>
24 |   <body>
25 |     <noscript>
26 |       You need to enable JavaScript to run this app.
27 |     </noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/components/sideNavigation.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import logo from "../assets/mdb-react.png";
 3 | import { MDBListGroup, MDBListGroupItem, MDBIcon } from 'mdbreact';
 4 | import { NavLink } from 'react-router-dom';
 5 | 
 6 | const TopNavigation = () => {
 7 |     return (
 8 |         <div className="sidebar-fixed position-fixed">
 9 |             <a href="#!" className="logo-wrapper waves-effect">
10 |                 <img alt="MDB React Logo" className="img-fluid" src={logo}/>
11 |             </a>
12 |             <MDBListGroup className="list-group-flush">
13 |                 <NavLink exact={true} to="/" activeClassName="activeClass">
14 |                     <MDBListGroupItem>
15 |                         <MDBIcon icon="chart-pie" className="mr-3"/>
16 |                         Dashboard
17 |                     </MDBListGroupItem>
18 |                 </NavLink>
19 |                 <NavLink to="/profile" activeClassName="activeClass">
20 |                     <MDBListGroupItem>
21 |                         <MDBIcon icon="user" className="mr-3"/>
22 |                         Profile
23 |                     </MDBListGroupItem>
24 |                 </NavLink>
25 |                 <NavLink to="/tables" activeClassName="activeClass">
26 |                     <MDBListGroupItem>
27 |                         <MDBIcon icon="table" className="mr-3"/>
28 |                         Tables
29 |                     </MDBListGroupItem>
30 |                 </NavLink>
31 |                 <NavLink to="/maps" activeClassName="activeClass">
32 |                     <MDBListGroupItem>
33 |                         <MDBIcon icon="map" className="mr-3"/>
34 |                         Maps
35 |                     </MDBListGroupItem>
36 |                 </NavLink>
37 |                 <NavLink to="/404" activeClassName="activeClass">
38 |                     <MDBListGroupItem>
39 |                         <MDBIcon icon="exclamation" className="mr-3"/>
40 |                         404
41 |                     </MDBListGroupItem>
42 |                 </NavLink>
43 |             </MDBListGroup>
44 |         </div>
45 |     );
46 | }
47 | 
48 | export default TopNavigation;


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
2 |     <g fill="#61DAFB">
3 |         <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
4 |         <circle cx="420.9" cy="296.5" r="45.7"/>
5 |         <path d="M520.5 78.1z"/>
6 |     </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/src/components/pages/sections/TableSection.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MDBCard, MDBCardBody, MDBTable, MDBTableBody, MDBTableHead, MDBRow, MDBCol } from 'mdbreact';
 3 | 
 4 | const TableSection = () => {
 5 |   return (
 6 |     <MDBRow className="mb-4">
 7 |           <MDBCol md="6">
 8 |               <MDBCard>
 9 |                   <MDBCardBody>
10 |                     <MDBTable hover>
11 |                       <MDBTableHead color="blue-grey lighten-4">
12 |                         <tr>
13 |                           <th>#</th>
14 |                           <th>First</th>
15 |                           <th>Last</th>
16 |                           <th>Handle</th>
17 |                         </tr>
18 |                       </MDBTableHead>
19 |                       <MDBTableBody>
20 |                         <tr>
21 |                           <td>1</td>
22 |                           <td>Mark</td>
23 |                           <td>Otto</td>
24 |                           <td>@mdo</td>
25 |                         </tr>
26 |                         <tr>
27 |                           <td>2</td>
28 |                           <td>Jacob</td>
29 |                           <td>Thornton</td>
30 |                           <td>@fat</td>
31 |                         </tr>
32 |                         <tr>
33 |                           <td>3</td>
34 |                           <td>Larry</td>
35 |                           <td>the Bird</td>
36 |                           <td>@twitter</td>
37 |                         </tr>
38 |                       </MDBTableBody>
39 |                     </MDBTable>
40 |                   </MDBCardBody>
41 |               </MDBCard>
42 |           </MDBCol>
43 |           <MDBCol md="6" className="mb-4">
44 |               <MDBCard>
45 |                   <MDBCardBody>
46 |                     <MDBTable hover>
47 |                       <MDBTableHead color="blue lighten-4">
48 |                         <tr>
49 |                           <th>#</th>
50 |                           <th>First</th>
51 |                           <th>Last</th>
52 |                           <th>Handle</th>
53 |                         </tr>
54 |                       </MDBTableHead>
55 |                       <MDBTableBody>
56 |                         <tr>
57 |                           <td>1</td>
58 |                           <td>Mark</td>
59 |                           <td>Otto</td>
60 |                           <td>@mdo</td>
61 |                         </tr>
62 |                         <tr>
63 |                           <td>2</td>
64 |                           <td>Jacob</td>
65 |                           <td>Thornton</td>
66 |                           <td>@fat</td>
67 |                         </tr>
68 |                         <tr>
69 |                           <td>3</td>
70 |                           <td>Larry</td>
71 |                           <td>the Bird</td>
72 |                           <td>@twitter</td>
73 |                         </tr>
74 |                       </MDBTableBody>
75 |                     </MDBTable>
76 |                   </MDBCardBody>
77 |               </MDBCard>
78 |           </MDBCol>
79 |       </MDBRow>
80 |   )
81 | }
82 | 
83 | export default TableSection;
84 | 
85 | 


--------------------------------------------------------------------------------
/src/components/pages/MapsPage.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { MDBCol, MDBRow, MDBCard, MDBCardBody, MDBView } from 'mdbreact';
 3 | import GoogleMapReact from 'google-map-react';
 4 | 
 5 | const MapsPage =  () => {
 6 |   return (
 7 |     <React.Fragment>
 8 |         <MDBRow>
 9 |           <MDBCol md="6">
10 |             <MDBCard className="mt-5">
11 |               <MDBView className="gradient-card-header blue darken-2">
12 |                 <h4 className="h4-responsive text-white">
13 |                   Regular map
14 |                 </h4>
15 |               </MDBView>
16 |               <MDBCardBody style={{width: '100%', height: '300px'}} className="text-center">
17 |                 <GoogleMapReact
18 |                   defaultCenter={{lat: 10, lng: 10}}
19 |                   defaultZoom={7}
20 |                  />
21 |               </MDBCardBody>
22 |             </MDBCard>
23 |           </MDBCol>
24 |           <MDBCol md="6">
25 |             <MDBCard className="mt-5">
26 |               <MDBView className="gradient-card-header blue darken-2">
27 |                 <h4 className="h4-responsive text-white">
28 |                   Hybrid map
29 |                 </h4>
30 |               </MDBView>
31 |               <MDBCardBody style={{width: '100%', height: '300px'}} className="text-center">
32 |                 <GoogleMapReact
33 |                     defaultCenter={{lat: 10, lng: 10}}
34 |                     defaultZoom={7}
35 |                     options = {{
36 |                       mapTypeId: 'hybrid'
37 |                     }}
38 |                   />
39 |               </MDBCardBody>
40 |             </MDBCard>
41 |           </MDBCol>
42 |         </MDBRow>
43 |         <MDBRow>
44 |           <MDBCol md="6">
45 |             <MDBCard className="mt-5">
46 |               <MDBView className="gradient-card-header blue darken-2">
47 |                 <h4 className="h4-responsive text-white">
48 |                 Satellite map
49 |                 </h4>
50 |               </MDBView>
51 |               <MDBCardBody style={{width: '100%', height: '300px'}} className="text-center">
52 |                 <GoogleMapReact
53 |                       defaultCenter={{lat: 10, lng: 10}}
54 |                       defaultZoom={7}
55 |                       options = {{
56 |                         mapTypeId: 'satellite'
57 |                       }}
58 |                     />
59 |               </MDBCardBody>
60 |             </MDBCard>
61 |           </MDBCol>
62 |           <MDBCol md="6">
63 |             <MDBCard className="mt-5">
64 |               <MDBView className="gradient-card-header blue darken-2">
65 |                 <h4 className="h4-responsive text-white">
66 |                   Terrain map
67 |                 </h4>
68 |               </MDBView>
69 |               <MDBCardBody style={{width: '100%', height: '300px'}} className="text-center">
70 |                 <GoogleMapReact
71 |                         defaultCenter={{lat: 10, lng: 10}}
72 |                         defaultZoom={7}
73 |                         options = {{
74 |                           mapTypeId: 'terrain'
75 |                         }}
76 |                       />
77 |               </MDBCardBody>
78 |             </MDBCard>
79 |           </MDBCol>
80 |         </MDBRow>
81 |     </React.Fragment>
82 |   )
83 | }
84 | 
85 | export default MapsPage;


--------------------------------------------------------------------------------
/src/components/topNavigation.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavbarToggler, MDBCollapse, MDBNavItem, MDBNavLink, MDBIcon } from 'mdbreact';
 3 | 
 4 | class TopNavigation extends Component {
 5 |     state = {
 6 |         collapse: false
 7 |     }
 8 | 
 9 |     onClick = () => {
10 |         this.setState({
11 |             collapse: !this.state.collapse,
12 |         });
13 |     }
14 | 
15 |     toggle = () => {
16 |         this.setState({
17 |             dropdownOpen: !this.state.dropdownOpen
18 |         });
19 |     }
20 | 
21 |     render() {
22 |         return (
23 |             <MDBNavbar className="flexible-navbar" light expand="md" scrolling>
24 |                 <MDBNavbarBrand href="/">
25 |                     <strong>MDB</strong>
26 |                 </MDBNavbarBrand>
27 |                 <MDBNavbarToggler onClick = { this.onClick } />
28 |                 <MDBCollapse isOpen = { this.state.collapse } navbar>
29 |                     <MDBNavbarNav left>
30 |                         <MDBNavItem active>
31 |                             <MDBNavLink to="#">Home</MDBNavLink>
32 |                         </MDBNavItem>
33 |                         <MDBNavItem>
34 |                             <a rel="noopener noreferrer" className="nav-link Ripple-parent" href="https://mdbootstrap.com/docs/react/" target="_blank">About MDB</a>
35 |                         </MDBNavItem>
36 |                         <MDBNavItem>
37 |                             <a rel="noopener noreferrer" className="nav-link Ripple-parent" href="https://mdbootstrap.com/docs/react/getting-started/download/" target="_blank">Free download</a>
38 |                         </MDBNavItem>
39 |                         <MDBNavItem>
40 |                             <a rel="noopener noreferrer"  className="nav-link Ripple-parent" href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank">Free tutorials</a>
41 |                         </MDBNavItem>
42 |                     </MDBNavbarNav>
43 |                     <MDBNavbarNav right>
44 |                         <MDBNavItem>
45 |                             <a className="nav-link navbar-link" rel="noopener noreferrer" target="_blank" href="https://pl-pl.facebook.com/mdbootstrap/"><MDBIcon fab icon="facebook" /></a>
46 |                         </MDBNavItem>
47 |                         <MDBNavItem>
48 |                             <a className="nav-link navbar-link" rel="noopener noreferrer" target="_blank" href="https://twitter.com/mdbootstrap"><MDBIcon fab icon="twitter" /></a>
49 |                         </MDBNavItem>
50 |                         <MDBNavItem>
51 |                             <a className="border border-light rounded mr-1 nav-link Ripple-parent" rel="noopener noreferrer" href="https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design" target="_blank"><MDBIcon fab icon="github" className="mr-2"/>MDB GitHub</a>
52 |                         </MDBNavItem>
53 |                         <MDBNavItem>
54 |                             <a className="border border-light rounded mr-1 nav-link Ripple-parent" rel="noopener noreferrer" href="https://mdbootstrap.com/products/react-ui-kit/" target="_blank"><MDBIcon fab icon="github" className="mr-2"/>Go Pro</a>
55 |                         </MDBNavItem>
56 |                     </MDBNavbarNav>
57 |                 </MDBCollapse>
58 |             </MDBNavbar>
59 |         );
60 |     }
61 | }
62 | 
63 | export default TopNavigation;


--------------------------------------------------------------------------------
/src/components/pages/sections/AdminCardSection2.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MDBCard, MDBCardBody, MDBIcon, MDBRow, MDBCol } from 'mdbreact';
 3 | 
 4 | const AdminCardSection2 = () => {
 5 |   return (
 6 |     <MDBRow className="mb-4">
 7 |         <MDBCol xl="3" md="6" className="mb-3">
 8 |           <MDBCard color="primary-color" className="classic-admin-card">
 9 |             <MDBCardBody>
10 |               <div className="float-right">
11 |               <MDBIcon far icon="money-bill-alt"/>
12 |               </div>
13 |               <p className="white-text">SALES</p>
14 |               <h4><strong>$2000</strong></h4>
15 |             </MDBCardBody>
16 |             <div className="progress">
17 |               <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" className="progress-bar bg grey darken-3" role="progressbar" style={{width: "25%"}}></div>
18 |             </div>
19 |             <MDBCardBody>
20 |               <p>Better than last week (25%)</p>
21 |             </MDBCardBody>
22 |           </MDBCard>
23 |         </MDBCol>
24 |         <MDBCol xl="3" md="6" className="mb-3">
25 |           <MDBCard color="warning-color" className="classic-admin-card">
26 |             <MDBCardBody>
27 |               <div className="float-right">
28 |               <MDBIcon icon="chart-line"/>
29 |               </div>
30 |               <p className="white-text">SUBSCRIPTIONS</p>
31 |               <h4><strong>200</strong></h4>
32 |             </MDBCardBody>
33 |             <div className="progress">
34 |               <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" className="progress-bar bg grey darken-3" role="progressbar" style={{width: "25%"}}></div>
35 |             </div>
36 |             <MDBCardBody>
37 |               <p>Worse than last week (25%)</p>
38 |             </MDBCardBody>
39 |           </MDBCard>
40 |         </MDBCol>
41 |         <MDBCol xl="3" md="6" className="mb-3">
42 |           <MDBCard color="primary-color" className="classic-admin-card">
43 |             <MDBCardBody>
44 |               <div className="float-right">
45 |               <MDBIcon icon="chart-pie"/>
46 |               </div>
47 |               <p className="white-text">TRAFFIC</p>
48 |               <h4><strong>20000</strong></h4>
49 |             </MDBCardBody>
50 |             <div className="progress">
51 |               <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" className="progress-bar bg grey darken-3" role="progressbar" style={{width: "75%"}}></div>
52 |             </div>
53 |             <MDBCardBody>
54 |               <p>Better than last week (75%)</p>
55 |             </MDBCardBody>
56 |           </MDBCard>
57 |         </MDBCol>
58 |         <MDBCol xl="3" md="6" className="mb-3">
59 |           <MDBCard color="red accent-2" className="classic-admin-card">
60 |             <MDBCardBody>
61 |               <div className="float-right">
62 |               <MDBIcon icon="chart-bar"/>
63 |               </div>
64 |               <p className="white-text">ORGANIC TRAFFIC</p>
65 |               <h4><strong>2000</strong></h4>
66 |             </MDBCardBody>
67 |             <div className="progress">
68 |               <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" className="progress-bar bg grey darken-3" role="progressbar" style={{width: "25%"}}></div>
69 |             </div>
70 |             <MDBCardBody>
71 |               <p>Better than last week (75%)</p>
72 |             </MDBCardBody>
73 |           </MDBCard>
74 |         </MDBCol>
75 |       </MDBRow>
76 |   )
77 | }
78 | 
79 | export default AdminCardSection2;
80 | 
81 | 


--------------------------------------------------------------------------------
/src/components/pages/sections/AdminCardSection1.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { MDBCard, MDBCardBody, MDBIcon, MDBRow, MDBCol, MDBCardText } from 'mdbreact';
 3 | 
 4 | const AdminCardSection1 = () => {
 5 |   return (
 6 |     <MDBRow className="mb-4">
 7 |         <MDBCol xl="3" md="6" className="mb-r">
 8 |           <MDBCard className="cascading-admin-card">
 9 |               <div className="admin-up">
10 |               <MDBIcon icon="money-bill-alt" className="primary-color"/>
11 |                 <div className="data">
12 |                   <p>SALES</p>
13 |                   <h4>
14 |                     <strong>$2000</strong>
15 |                   </h4>
16 |                 </div>
17 |               </div>
18 |               <MDBCardBody>
19 |                 <div className="progress">
20 |                   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" className="progress-bar bg-primary" role="progressbar"
21 |                     style={{width: '25%'}}></div>
22 |                 </div>
23 |                 <MDBCardText>Better than last week (25%)</MDBCardText>
24 |               </MDBCardBody>
25 |             </MDBCard>
26 |         </MDBCol>
27 |         <MDBCol xl="3" md="6" className="mb-r">
28 |           <MDBCard className="cascading-admin-card">
29 |               <div className="admin-up">
30 |               <MDBIcon icon="chart-line" className="warning-color"/>
31 |                 <div className="data">
32 |                   <p>SUBSCRIPTIONS</p>
33 |                   <h4>
34 |                     <strong>200</strong>
35 |                   </h4>
36 |                 </div>
37 |               </div>
38 |               <MDBCardBody>
39 |                 <div className="progress">
40 |                   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" className="progress-bar bg grey" role="progressbar"
41 |                     style={{width: '25%'}}></div>
42 |                 </div>
43 |                 <MDBCardText>Worse than last week (25%)</MDBCardText>
44 |               </MDBCardBody>
45 |             </MDBCard>
46 |         </MDBCol>
47 |         <MDBCol xl="3" md="6" className="mb-r">
48 |           <MDBCard className="cascading-admin-card">
49 |               <div className="admin-up">
50 |               <MDBIcon icon="chart-pie" className="light-blue lighten-1"/>
51 |                 <div className="data">
52 |                   <p>TRAFFIC</p>
53 |                   <h4>
54 |                     <strong>20000</strong>
55 |                   </h4>
56 |                 </div>
57 |               </div>
58 |               <MDBCardBody>
59 |                 <div className="progress">
60 |                   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" className="progress-bar grey darken-2" role="progressbar"
61 |                     style={{width: '75%'}}></div>
62 |                 </div>
63 |                 <MDBCardText>Worse than last week (75%)</MDBCardText>
64 |               </MDBCardBody>
65 |             </MDBCard>
66 |         </MDBCol>
67 |         <MDBCol xl="3" md="6" className="mb-r">
68 |           <MDBCard className="cascading-admin-card">
69 |               <div className="admin-up">
70 |               <MDBIcon icon="chart-bar" className="red accent-2"/>
71 |                 <div className="data">
72 |                   <p>ORGANIC TRAFFIC</p>
73 |                   <h4>
74 |                     <strong>2000</strong>
75 |                   </h4>
76 |                 </div>
77 |               </div>
78 |               <MDBCardBody>
79 |                 <div className="progress">
80 |                   <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" className="progress-bar bg-primary" role="progressbar"
81 |                     style={{width: '25%'}}></div>
82 |                 </div>
83 |                 <MDBCardText>Better than last week (25%)</MDBCardText>
84 |               </MDBCardBody>
85 |             </MDBCard>
86 |         </MDBCol>
87 |       </MDBRow>
88 |   )
89 | }
90 | 
91 | export default AdminCardSection1;
92 | 
93 | 


--------------------------------------------------------------------------------
/src/components/pages/sections/ChartSection2.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | import { MDBCol, MDBCard, MDBCardBody, MDBCardHeader, MDBRow } from 'mdbreact';
 3 | import { Line, Doughnut, Radar } from 'react-chartjs-2';
 4 | 
 5 | class ChartSection2 extends Component {
 6 |     render(){
 7 |         const dataLine = {
 8 |             labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
 9 |             datasets: [
10 |               {
11 |                 label: 'My First dataset',
12 |                 fill: false,
13 |                 lineTension: 0.1,
14 |                 backgroundColor: 'rgba(75,192,192,0.4)',
15 |                 borderColor: 'rgba(75,192,192,1)',
16 |                 borderCapStyle: 'butt',
17 |                 borderDash: [],
18 |                 borderDashOffset: 0.0,
19 |                 borderJoinStyle: 'miter',
20 |                 pointBorderColor: 'rgba(75,192,192,1)',
21 |                 pointBackgroundColor: '#fff',
22 |                 pointBorderWidth: 1,
23 |                 pointHoverRadius: 5,
24 |                 pointHoverBackgroundColor: 'rgba(75,192,192,1)',
25 |                 pointHoverBorderColor: 'rgba(220,220,220,1)',
26 |                 pointHoverBorderWidth: 2,
27 |                 pointRadius: 1,
28 |                 pointHitRadius: 10,
29 |                 data: [65, 59, 80, 81, 56, 55, 40]
30 |               }
31 |             ]
32 |         };
33 | 
34 |         const dataRadar = {
35 |             labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
36 |             datasets: [
37 |                 {
38 |                   label: '#1',
39 |                   backgroundColor: 'rgba(245, 74, 85, 0.5)',
40 |                   data: [65, 59, 80, 81, 56, 55, 40]
41 |                 },
42 |                 {
43 |                   label: '#2',
44 |                   backgroundColor: 'rgba(90, 173, 246, 0.5)',
45 |                   data: [12, 42, 121, 56, 24, 12, 2]
46 |                 },
47 |                 {
48 |                   label: '#3',
49 |                   backgroundColor: 'rgba(245, 192, 50, 0.5)',
50 |                   data: [2, 123, 154, 76, 54, 23, 5]
51 |                 }
52 |               ]
53 |         };
54 | 
55 |         const dataDoughnut = {
56 |             labels: ["Red", "Green", "Yellow", "Grey", "Dark Grey"],
57 |             datasets: [{
58 |                 data: [300, 50, 100, 40, 120],
59 |                 backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"],
60 |                 hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"]
61 |             }]
62 |         };
63 | 
64 |         return (
65 |             <MDBRow className="mb-4">
66 |                 <MDBCol md="12" lg="4" className="mb-4">
67 |                     <MDBCard className="mb-4">
68 |                     <MDBCardHeader>Line chart</MDBCardHeader>
69 |                     <MDBCardBody>
70 |                         <Line data={dataLine} options={{responsive: true }} />
71 |                     </MDBCardBody>
72 |                     </MDBCard>
73 |                 </MDBCol>
74 |                 <MDBCol md="12" lg="4" className="mb-4">
75 |                     <MDBCard className="mb-4">
76 |                     <MDBCardHeader>Radar chart</MDBCardHeader>
77 |                     <MDBCardBody>
78 |                         <Radar data={dataRadar}  height={300} options={{responsive: true }} />
79 |                     </MDBCardBody>
80 |                     </MDBCard>
81 |                 </MDBCol>
82 |                 <MDBCol md="12" lg="4" className="mb-4">
83 |                     <MDBCard className="mb-4">
84 |                     <MDBCardHeader>Doughnut chart</MDBCardHeader>
85 |                     <MDBCardBody >
86 |                         <Doughnut data={dataDoughnut}  height={300} options={{responsive: true }} />
87 |                     </MDBCardBody>
88 |                     </MDBCard>
89 |                 </MDBCol>
90 |             </MDBRow>
91 |         )
92 |     }
93 | 
94 | }
95 | 
96 | export default ChartSection2;
97 | 
98 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | body{
  2 |   margin: 0;
  3 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  4 |   font-size: 1rem;
  5 |   font-weight: 400;
  6 |   line-height: 1.5;
  7 |   color: #212529;
  8 |   text-align: left;
  9 |   background-color: #EDEDEE;
 10 | }
 11 | 
 12 | a{
 13 |   color: inherit;
 14 | }
 15 | 
 16 | .list-group-flush{
 17 |   color: #495057;
 18 | }
 19 | 
 20 | .active{
 21 |   background-color: #e9ecef !;
 22 | }
 23 | 
 24 | main {
 25 |   background-color: #EDEDEE;
 26 | }
 27 | 
 28 | .navbar-brand{
 29 |   margin-left: 15px;
 30 |   color: #2196f3 !important;
 31 | }
 32 | 
 33 | .sidebar-fixed {
 34 |   left: 0;
 35 |   top: 0;
 36 |   height: 100vh;
 37 |   width: 270px;
 38 |   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 39 |   z-index: 1050;
 40 |   background-color: #fff;
 41 |   padding: 1.5rem;
 42 |   padding-top: 0;
 43 | }
 44 | 
 45 | 
 46 | .flexible-navbar {
 47 |   transition: padding-left 0.5s;
 48 |   padding-left: 270px;
 49 |   background: #fff;
 50 | }
 51 | 
 52 | #content{
 53 |   margin-left: 270px;
 54 | }    
 55 | 
 56 | 
 57 | .sidebar-fixed .logo-wrapper img{
 58 |   width: 100%;
 59 |   padding: 2.5rem;
 60 | }
 61 | 
 62 | .list-group-item {
 63 |   display: block !important;
 64 |   transition: background-color 0.3s;
 65 | }
 66 | 
 67 | .list-group-item:hover {
 68 |   color: #49505B;
 69 |   text-decoration: none;
 70 |   background-color: #f8f9fa
 71 | }
 72 | 
 73 | .list-group-item:hover {
 74 |   color: #49505B;
 75 |   text-decoration: none;
 76 |   background-color: #f8f9fa
 77 | }
 78 | 
 79 | 
 80 | .list-group .active {
 81 |   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 82 |   border-radius: 5px;
 83 | }
 84 | 
 85 | .card-title{
 86 |   font-size: 1.5rem;
 87 |   font-weight: 600;
 88 | }
 89 | 
 90 | .card-subtitle{
 91 |   font-size: 1.25rem;
 92 |   font-weight: 600;
 93 | }
 94 | 
 95 | .full {
 96 |   height: 70vh;
 97 | }
 98 | 
 99 | .bad-gateway-row {
100 |   margin: 0;
101 |   position: absolute;
102 |   top: 50%;
103 |   left: 55%;
104 |   -webkit-transform: translate(-50%, -50%);
105 |   transform: translate(-50%, -50%);
106 | }
107 | 
108 | 
109 | .card .view.gradient-card-header {
110 |   padding: 1rem 1rem;
111 |   text-align: center;
112 | }
113 | 
114 | .card h3, .card.card-cascade h4 {
115 |   margin-bottom: 0px;
116 | }
117 | 
118 | .cascading-admin-card .admin-up {
119 |   margin-left: 4%;
120 |   margin-right: 4%;
121 |   margin-top: -20px;
122 | }
123 | 
124 | .cascading-admin-card .admin-up .fa {
125 |   box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2), 0 2px 13px 0 rgba(0, 0, 0, 0.19);
126 | }
127 | 
128 | .cascading-admin-card .admin-up .fa {
129 |   padding: 1.7rem;
130 |   font-size: 2rem;
131 |   color: #fff;
132 |   text-align: left;
133 |   margin-right: 1rem;
134 |   border-radius: 3px;
135 | }
136 | 
137 | .cascading-admin-card .admin-up .data {
138 |   float: right;
139 |   margin-top: 2rem;
140 |   text-align: right;
141 | }
142 | .admin-up .data p {
143 |   color: #999999;
144 |   font-size: 12px;
145 | }
146 | .classic-admin-card .card-body {
147 |   color: #fff;
148 |   margin-bottom: 0;
149 |   padding: 0.9rem;
150 | }
151 | .classic-admin-card .card-body p {
152 |   font-size: 13px;
153 |   opacity: 0.7;
154 |   margin-bottom: 0;
155 | }
156 | .classic-admin-card .card-body h4 {
157 |   margin-top: 10px;
158 | }
159 | 
160 | .form-inline{
161 |   flex-flow: unset
162 | }
163 | 
164 | .breadcrumb{
165 |   margin: 0;
166 | }
167 | 
168 | .activeClass .list-group-item {
169 |   z-index: 5;
170 |   color: #fff;
171 |   border-color: #007bff;
172 |   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
173 |   border-radius: 5px !important;
174 |   background-color: #007bff !important;
175 | }
176 | 
177 | .page-footer{
178 |   margin-left: 270px;
179 | }
180 | 
181 | @media (max-width: 1199.98px) {
182 |   .sidebar-fixed {
183 |     display: none;
184 |   }
185 |   .flexible-content {
186 |     padding-left: 0;
187 |   }
188 |   .flexible-navbar {
189 |     padding-left: 10px;
190 |   }
191 | 
192 |   #content{
193 |     margin-left: 0px;
194 |   }
195 | 
196 |   .page-footer{
197 |     margin-left: 0px;
198 |   }
199 |   
200 |   .card.cascading-admin-card {
201 |     margin-top: 2.5rem;
202 |   } 
203 | }
204 | 
205 | @media (max-width: 576px) { 
206 |   .card.cascading-admin-card {
207 |     margin-top: 2.5rem;
208 |   }
209 | 
210 |   #breadcrumb{
211 |     flex-direction: column;
212 |   }
213 | }
214 | 
215 | 
216 | 
217 | 
218 | 


--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
  1 | // In production, we register a service worker to serve assets from local cache.
  2 | 
  3 | // This lets the app load faster on subsequent visits in production, and gives
  4 | // it offline capabilities. However, it also means that developers (and users)
  5 | // will only see deployed updates on the "N+1" visit to a page, since previously
  6 | // cached resources are updated in the background.
  7 | 
  8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
  9 | // This link also includes instructions on opting out of this behavior.
 10 | 
 11 | const isLocalhost = Boolean(
 12 |   window.location.hostname === 'localhost' ||
 13 |     // [::1] is the IPv6 localhost address.
 14 |     window.location.hostname === '[::1]' ||
 15 |     // 127.0.0.1/8 is considered localhost for IPv4.
 16 |     window.location.hostname.match(
 17 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 18 |     )
 19 | );
 20 | 
 21 | export default function register() {
 22 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 23 |     // The URL constructor is available in all browsers that support SW.
 24 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
 25 |     if (publicUrl.origin !== window.location.origin) {
 26 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 27 |       // from what our page is served on. This might happen if a CDN is used to
 28 |       // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
 29 |       return;
 30 |     }
 31 | 
 32 |     window.addEventListener('load', () => {
 33 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 34 | 
 35 |       if (isLocalhost) {
 36 |         // This is running on localhost. Lets check if a service worker still exists or not.
 37 |         checkValidServiceWorker(swUrl);
 38 | 
 39 |         // Add some additional logging to localhost, pointing developers to the
 40 |         // service worker/PWA documentation.
 41 |         navigator.serviceWorker.ready.then(() => {
 42 |           console.log(
 43 |             'This web app is being served cache-first by a service ' +
 44 |               'worker. To learn more, visit https://goo.gl/SC7cgQ'
 45 |           );
 46 |         });
 47 |       } else {
 48 |         // Is not local host. Just register service worker
 49 |         registerValidSW(swUrl);
 50 |       }
 51 |     });
 52 |   }
 53 | }
 54 | 
 55 | function registerValidSW(swUrl) {
 56 |   navigator.serviceWorker
 57 |     .register(swUrl)
 58 |     .then(registration => {
 59 |       registration.onupdatefound = () => {
 60 |         const installingWorker = registration.installing;
 61 |         installingWorker.onstatechange = () => {
 62 |           if (installingWorker.state === 'installed') {
 63 |             if (navigator.serviceWorker.controller) {
 64 |               // At this point, the old content will have been purged and
 65 |               // the fresh content will have been added to the cache.
 66 |               // It's the perfect time to display a "New content is
 67 |               // available; please refresh." message in your web app.
 68 |               console.log('New content is available; please refresh.');
 69 |             } else {
 70 |               // At this point, everything has been precached.
 71 |               // It's the perfect time to display a
 72 |               // "Content is cached for offline use." message.
 73 |               console.log('Content is cached for offline use.');
 74 |             }
 75 |           }
 76 |         };
 77 |       };
 78 |     })
 79 |     .catch(error => {
 80 |       console.error('Error during service worker registration:', error);
 81 |     });
 82 | }
 83 | 
 84 | function checkValidServiceWorker(swUrl) {
 85 |   // Check if the service worker can be found. If it can't reload the page.
 86 |   fetch(swUrl)
 87 |     .then(response => {
 88 |       // Ensure service worker exists, and that we really are getting a JS file.
 89 |       if (
 90 |         response.status === 404 ||
 91 |         response.headers.get('content-type').indexOf('javascript') === -1
 92 |       ) {
 93 |         // No service worker found. Probably a different app. Reload the page.
 94 |         navigator.serviceWorker.ready.then(registration => {
 95 |           registration.unregister().then(() => {
 96 |             window.location.reload();
 97 |           });
 98 |         });
 99 |       } else {
100 |         // Service worker found. Proceed as normal.
101 |         registerValidSW(swUrl);
102 |       }
103 |     })
104 |     .catch(() => {
105 |       console.log(
106 |         'No internet connection found. App is running in offline mode.'
107 |       );
108 |     });
109 | }
110 | 
111 | export function unregister() {
112 |   if ('serviceWorker' in navigator) {
113 |     navigator.serviceWorker.ready.then(registration => {
114 |       registration.unregister();
115 |     });
116 |   }
117 | }
118 | 


--------------------------------------------------------------------------------
/src/components/pages/sections/ChartSection1.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { MDBCol, MDBCard, MDBCardBody, MDBCardHeader, MDBRow, MDBListGroup, MDBListGroupItem, MDBBadge, MDBIcon } from 'mdbreact';
  3 | import { Bar, Pie } from 'react-chartjs-2';
  4 | 
  5 | class ChartSection1 extends Component {
  6 |     render(){
  7 |         const dataBar = {
  8 |             labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
  9 |             datasets: [
 10 |             {
 11 |                 label: '#1',
 12 |                 data: [12, 39, 3, 50, 2, 32, 84],
 13 |                 backgroundColor: 'rgba(245, 74, 85, 0.5)',
 14 |                 borderWidth: 1
 15 |             }, {
 16 |                 label: '#2',
 17 |                 data: [56, 24, 5, 16, 45, 24, 8],
 18 |                 backgroundColor: 'rgba(90, 173, 246, 0.5)',
 19 |                 borderWidth: 1
 20 |             }, {
 21 |                 label: '#3',
 22 |                 data: [12, 25, 54, 3, 15, 44, 3],
 23 |                 backgroundColor: 'rgba(245, 192, 50, 0.5)',
 24 |                 borderWidth: 1
 25 |             }
 26 |             ]
 27 |         };
 28 | 
 29 |         const barChartOptions = {
 30 |             responsive: true,
 31 |             maintainAspectRatio: false,
 32 |             scales: {
 33 |             xAxes: [{
 34 |                 barPercentage: 1,
 35 |                 gridLines: {
 36 |                 display: true,
 37 |                 color: 'rgba(0, 0, 0, 0.1)'
 38 |                 }
 39 |             }],
 40 |             yAxes: [{
 41 |                 gridLines: {
 42 |                 display: true,
 43 |                 color: 'rgba(0, 0, 0, 0.1)'
 44 |                 },
 45 |                 ticks: {
 46 |                 beginAtZero: true
 47 |                 }
 48 |             }]
 49 |             }
 50 |         }
 51 | 
 52 |         const dataPie = {
 53 |             labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
 54 |             datasets: [
 55 |             {
 56 |                 data: [300, 50, 100, 40, 120, 24, 52],
 57 |                 backgroundColor: ['#F7464A', '#46BFBD', '#FDB45C', '#949FB1', '#4D5360', '#ac64ad'],
 58 |                 hoverBackgroundColor: ['#FF5A5E', '#5AD3D1', '#FFC870', '#A8B3C5', '#616774', '#da92db']
 59 |             }
 60 |             ]
 61 |         }
 62 |         return (
 63 |             <MDBRow className="mb-4">
 64 |                 <MDBCol md="8"className="mb-4">
 65 |                     <MDBCard className="mb-4">
 66 |                         <MDBCardBody>
 67 |                             <Bar data={dataBar} height={500} options={barChartOptions} />
 68 |                         </MDBCardBody>
 69 |                     </MDBCard>
 70 |                 </MDBCol>
 71 |                 <MDBCol md="4" className="mb-4">
 72 |                     <MDBCard className="mb-4">
 73 |                         <MDBCardHeader>Pie chart</MDBCardHeader>
 74 |                         <MDBCardBody>
 75 |                             <Pie data={dataPie} height={300} options={{responsive: true}} />
 76 |                         </MDBCardBody>
 77 |                     </MDBCard>
 78 |                     <MDBCard className="mb-4">
 79 |                         <MDBCardBody>
 80 |                             <MDBListGroup className="list-group-flush">
 81 |                                 <MDBListGroupItem>
 82 |                                     Sales
 83 |                                     <MDBBadge color="success-color" pill className="float-right">
 84 |                                         22%
 85 |                                         <MDBIcon icon="arrow-up" className="ml-1"/>
 86 |                                     </MDBBadge>
 87 |                                 </MDBListGroupItem>
 88 |                                 <MDBListGroupItem>
 89 |                                     Traffic
 90 |                                     <MDBBadge color="danger-color" pill className="float-right">
 91 |                                         5%
 92 |                                         <MDBIcon icon="arrow-down" className="ml-1"/>
 93 |                                     </MDBBadge>
 94 |                                 </MDBListGroupItem>
 95 |                                 <MDBListGroupItem>
 96 |                                     Orders
 97 |                                     <MDBBadge color="primary-color" pill className="float-right">
 98 |                                         14
 99 |                                     </MDBBadge>
100 |                                 </MDBListGroupItem>
101 |                                 <MDBListGroupItem>
102 |                                     Issues
103 |                                     <MDBBadge color="primary-color" pill className="float-right">
104 |                                         123
105 |                                     </MDBBadge>
106 |                                 </MDBListGroupItem>
107 |                                 <MDBListGroupItem>
108 |                                     Messages
109 |                                     <MDBBadge color="primary-color" pill className="float-right">
110 |                                         8
111 |                                     </MDBBadge>
112 |                                 </MDBListGroupItem>
113 |                             </MDBListGroup>
114 |                         </MDBCardBody>
115 |                     </MDBCard>
116 |                 </MDBCol>
117 |             </MDBRow>
118 |         )
119 |     }
120 | }
121 | 
122 | export default ChartSection1;
123 | 
124 | 


--------------------------------------------------------------------------------
/src/components/pages/TablesPage.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { MDBRow, MDBCol, MDBView, MDBCard, MDBCardBody, MDBTable, MDBTableHead, MDBTableBody } from 'mdbreact';
  3 | 
  4 | const TablesPage =  () => {
  5 |   return (
  6 |     <>
  7 |       <MDBRow>
  8 |       <MDBCol md="12">
  9 |         <MDBCard className="mt-5">
 10 |           <MDBView className="gradient-card-header blue darken-2">
 11 |             <h4 className="h4-responsive text-white">Basic tables</h4>
 12 |           </MDBView>
 13 |           <MDBCardBody>
 14 |             <h3 className="mt-5 text-left"><strong>Basic examples</strong></h3>
 15 |             <p>Using the most basic table markup, here’s how .table-based tables look in Bootstrap. All table styles are inherited in Bootstrap 4, meaning any nested tables will be styled in the same manner as the parent.</p>
 16 |             <MDBTable>
 17 |               <MDBTableHead>
 18 |                 <tr>
 19 |                   <th>#</th>
 20 |                   <th>First</th>
 21 |                   <th>Last</th>
 22 |                   <th>Handle</th>
 23 |                 </tr>
 24 |               </MDBTableHead>
 25 |               <MDBTableBody>
 26 |                 <tr>
 27 |                   <td>1</td>
 28 |                   <td>Mark</td>
 29 |                   <td>Otto</td>
 30 |                   <td>@mdo</td>
 31 |                 </tr>
 32 |                 <tr>
 33 |                   <td>2</td>
 34 |                   <td>Jacob</td>
 35 |                   <td>Thornton</td>
 36 |                   <td>@fat</td>
 37 |                 </tr>
 38 |                 <tr>
 39 |                   <td>3</td>
 40 |                   <td>Larry</td>
 41 |                   <td>the Bird</td>
 42 |                   <td>@twitter</td>
 43 |                 </tr>
 44 |               </MDBTableBody>
 45 |             </MDBTable>
 46 |             <h3 className="mt-5 text-left"><strong>MDBTable head options</strong></h3>
 47 |             <p>To change a background-color of thead (or any other element) use our color classes. If you are going to use a dark background you should also consider white text (to provide a proper contrast) by adding .text-white class.</p>
 48 |             <MDBTable>
 49 |               <MDBTableHead color="primary-color" textWhite>
 50 |                 <tr>
 51 |                   <th>#</th>
 52 |                   <th>First</th>
 53 |                   <th>Last</th>
 54 |                   <th>Handle</th>
 55 |                 </tr>
 56 |               </MDBTableHead>
 57 |               <MDBTableBody>
 58 |                 <tr>
 59 |                   <td>1</td>
 60 |                   <td>Mark</td>
 61 |                   <td>Otto</td>
 62 |                   <td>@mdo</td>
 63 |                 </tr>
 64 |                 <tr>
 65 |                   <td>2</td>
 66 |                   <td>Jacob</td>
 67 |                   <td>Thornton</td>
 68 |                   <td>@fat</td>
 69 |                 </tr>
 70 |                 <tr>
 71 |                   <td>3</td>
 72 |                   <td>Larry</td>
 73 |                   <td>the Bird</td>
 74 |                   <td>@twitter</td>
 75 |                 </tr>
 76 |               </MDBTableBody>
 77 |             </MDBTable>
 78 |             <MDBTable>
 79 |               <MDBTableHead color="pink">
 80 |                 <tr>
 81 |                   <th>#</th>
 82 |                   <th>First</th>
 83 |                   <th>Last</th>
 84 |                   <th>Handle</th>
 85 |                 </tr>
 86 |               </MDBTableHead>
 87 |               <MDBTableBody>
 88 |                 <tr>
 89 |                   <td>1</td>
 90 |                   <td>Mark</td>
 91 |                   <td>Otto</td>
 92 |                   <td>@mdo</td>
 93 |                 </tr>
 94 |                 <tr>
 95 |                   <td>2</td>
 96 |                   <td>Jacob</td>
 97 |                   <td>Thornton</td>
 98 |                   <td>@fat</td>
 99 |                 </tr>
100 |                 <tr>
101 |                   <td>3</td>
102 |                   <td>Larry</td>
103 |                   <td>the Bird</td>
104 |                   <td>@twitter</td>
105 |                 </tr>
106 |               </MDBTableBody>
107 |             </MDBTable>
108 |             <h3 className="mt-5 text-left"><strong>Striped rows.</strong></h3>
109 |             <p>Use prop striped to add zebra-striping to any table row within the table body</p>
110 |             <MDBTable striped>
111 |               <MDBTableHead>
112 |                 <tr>
113 |                   <th>#</th>
114 |                   <th>First</th>
115 |                   <th>Last</th>
116 |                   <th>Handle</th>
117 |                 </tr>
118 |               </MDBTableHead>
119 |               <MDBTableBody>
120 |                 <tr>
121 |                   <td>1</td>
122 |                   <td>Mark</td>
123 |                   <td>Otto</td>
124 |                   <td>@mdo</td>
125 |                 </tr>
126 |                 <tr>
127 |                   <td>2</td>
128 |                   <td>Jacob</td>
129 |                   <td>Thornton</td>
130 |                   <td>@fat</td>
131 |                 </tr>
132 |                 <tr>
133 |                   <td>3</td>
134 |                   <td>Larry</td>
135 |                   <td>the Bird</td>
136 |                   <td>@twitter</td>
137 |                 </tr>
138 |               </MDBTableBody>
139 |             </MDBTable>
140 |           </MDBCardBody>
141 |         </MDBCard>
142 |       </MDBCol>
143 |     </MDBRow>
144 |     </>
145 |   )
146 | }
147 | 
148 | export default TablesPage;


--------------------------------------------------------------------------------
/src/components/pages/ProfilePage.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import { MDBCard, MDBCol, MDBRow, MDBView, MDBMask, MDBCardImage, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardFooter, MDBBtn, MDBIcon } from 'mdbreact';
  3 | import src1 from '../../assets/img-1.jpg';
  4 | 
  5 | const ProfilePage =  () => {
  6 |   return (
  7 |     <React.Fragment>
  8 |         <MDBRow className="justify-content-center">
  9 |         <MDBCol sm="12" md="6" lg="3" className="mb-5">
 10 |             <MDBCard>
 11 |                 <MDBCardImage className="img-fluid" src={src1} />
 12 |                 <MDBCardBody>
 13 |                     <MDBCardTitle className="text-center mb-2 font-bold">Alice Mayer</MDBCardTitle>
 14 |                     <MDBCardTitle sub className="text-center indigo-text mb-2 font-bold">Photographer</MDBCardTitle>
 15 |                     <MDBCardText>
 16 |                         <strong className="mb-2">About:</strong>
 17 |                         Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione perferendis quod animi dignissimos consectetur quibusdam numquam laboriosam, minus, provident...
 18 |                     </MDBCardText>
 19 |                     <div className="row justify-content-end pr-1">
 20 |                         <MDBBtn size="sm" outline color="primary">More...</MDBBtn>
 21 |                     </div>
 22 |                 </MDBCardBody>
 23 |             </MDBCard>
 24 |         </MDBCol>
 25 |         <MDBCol md="6" lg="9">
 26 |         <section className="text-center pb-3">
 27 |           <MDBRow className="d-flex justify-content-center">
 28 |             <MDBCol lg="6" xl="5" className="mb-3">
 29 |               <MDBCard className="d-flex mb-5">
 30 |                 <MDBView>
 31 |                   <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/pro-profile-page.jpg" alt="Project" className="img-fluid"/>
 32 |                   <MDBMask overlay="white-slight"/>
 33 |                 </MDBView>
 34 |                 <MDBCardBody>
 35 |                   <MDBCardTitle className="font-bold mb-3">
 36 |                     <strong>Project name</strong>
 37 |                   </MDBCardTitle>
 38 |                   <MDBCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</MDBCardText>
 39 |                 </MDBCardBody>
 40 |                 <MDBCardFooter className="links-light profile-card-footer">
 41 |                   <span className="right">
 42 |                     <a className="p-2" href="#profile">
 43 |                       Live Preview
 44 |                       <MDBIcon icon="image" className="ml-1"/>
 45 |                     </a>
 46 |                   </span>
 47 |                 </MDBCardFooter>
 48 |               </MDBCard>
 49 |             </MDBCol>
 50 |             <MDBCol lg="6" xl="5" className="mb-3">
 51 |               <MDBCard className="d-flex mb-5">
 52 |                 <MDBView>
 53 |                   <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/pro-signup.jpg" alt="Project" className="img-fluid"/>
 54 |                   <MDBMask overlay="white-slight"/>
 55 |                 </MDBView>
 56 |                 <MDBCardBody>
 57 |                   <MDBCardTitle className="font-bold mb-3">
 58 |                     <strong>Project name</strong>
 59 |                   </MDBCardTitle>
 60 |                   <MDBCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</MDBCardText>
 61 |                 </MDBCardBody>
 62 |                 <MDBCardFooter className="links-light profile-card-footer">
 63 |                   <span className="right">
 64 |                     <a className="p-2" href="#profile">
 65 |                       Live Preview
 66 |                       <MDBIcon icon="image" className="ml-1"/>
 67 |                     </a>
 68 |                   </span>
 69 |                 </MDBCardFooter>
 70 |               </MDBCard>
 71 |             </MDBCol>
 72 |           </MDBRow>
 73 |           <MDBRow className="d-flex justify-content-center">
 74 |             <MDBCol lg="6" xl="5" className="mb-3">
 75 |               <MDBCard className="d-flex mb-5">
 76 |                 <MDBView>
 77 |                   <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/pro-profile-page.jpg" alt="Project" className="img-fluid"/>
 78 |                   <MDBMask overlay="white-slight"/>
 79 |                 </MDBView>
 80 |                 <MDBCardBody>
 81 |                   <MDBCardTitle className="font-bold mb-3">
 82 |                     <strong>Project name</strong>
 83 |                   </MDBCardTitle>
 84 |                   <MDBCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</MDBCardText>
 85 |                 </MDBCardBody>
 86 |                 <MDBCardFooter className="links-light profile-card-footer">
 87 |                   <span className="right">
 88 |                     <a className="p-2" href="#profile">
 89 |                       Live Preview
 90 |                       <MDBIcon icon="image" className="ml-1"/>
 91 |                     </a>
 92 |                   </span>
 93 |                 </MDBCardFooter>
 94 |               </MDBCard>
 95 |             </MDBCol>
 96 |             <MDBCol lg="6" xl="5" className="mb-3">
 97 |               <MDBCard className="d-flex mb-5">
 98 |                 <view-wrapper>
 99 |                   <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/pro-signup.jpg" alt="Project" className="img-fluid"/>
100 |                   <MDBMask overlay="white-slight"/>
101 |                 </view-wrapper>
102 |                 <MDBCardBody>
103 |                   <MDBCardTitle className="font-bold mb-3">
104 |                     <strong>Project name</strong>
105 |                   </MDBCardTitle>
106 |                   <MDBCardText>Some quick example text to build on the card title and make up the bulk of the card's content.</MDBCardText>
107 |                 </MDBCardBody>
108 |                 <MDBCardFooter className="links-light profile-card-footer">
109 |                   <span className="right">
110 |                     <a className="p-2" href="#profile">
111 |                       Live Preview
112 |                       <MDBIcon icon="image" className="ml-1"/>
113 |                     </a>
114 |                   </span>
115 |                 </MDBCardFooter>
116 |               </MDBCard>
117 |             </MDBCol>
118 |           </MDBRow>
119 |         </section>
120 |       </MDBCol>
121 |     </MDBRow>
122 |     </React.Fragment>
123 |   );
124 | }
125 | 
126 | export default ProfilePage;


--------------------------------------------------------------------------------
/src/components/pages/sections/ModalSection.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react';
  2 | import { MDBCol, MDBRow, MDBCard, MDBCardBody, MDBCardHeader, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader} from 'mdbreact';
  3 | 
  4 | class ModalSection extends Component {
  5 |     state = {
  6 |         modal1: false,
  7 |         modal2: false,
  8 |         modal3: false,
  9 |         modal4: false,
 10 |         modal5: false,
 11 |         modal6: false,
 12 |         modal7: false,
 13 |         modal8: false,
 14 |         modal9: false,
 15 |         modal10: false,
 16 |         modal11: false,
 17 |         modal12: false,
 18 |         modal13: false
 19 |     }
 20 | 
 21 |     toggle = nr =>  () => {
 22 |         let modalName = 'modal' + nr;
 23 |         this.setState({
 24 |             [modalName]: !this.state[modalName]
 25 |         })
 26 |     }
 27 | 
 28 |     render(){
 29 |         return (
 30 |             <MDBCol lg="6" className="mb-4">
 31 |               <MDBCard>
 32 |                 <MDBCardHeader>Modals</MDBCardHeader>
 33 |                 <MDBCardBody>
 34 |                   <h4 className="mb-5 mt-4 dark-grey-text text-center font-bold"><strong>Position & Sizes</strong></h4>
 35 |                   <div className="text-center mb-5">
 36 |                       <p className="lead">Click buttons below to launch modals demo</p>
 37 |                   </div>
 38 |                   <MDBRow>
 39 |                       <MDBCol md="3" className="mb-3">
 40 |                           <h5 className="text-center mb-3">Frame modal</h5>
 41 |                           <img className="img-fluid z-depth-1" src="https://mdbootstrap.com/img/brandflow/modal4.jpg" alt="frame position"/>
 42 |                           <div className="text-center">
 43 |                               <h5 className="my-3">Position</h5>
 44 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(1)}>Top</MDBBtn>
 45 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(2)}>Bottom</MDBBtn>
 46 |                               <MDBModal toggle={this.toggle(1)} isOpen={this.state.modal1} position="top" frame>
 47 |                                   <MDBModalBody className="text-center">
 48 |                                   <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
 49 |                                   <MDBBtn color="secondary" onClick={this.toggle(1)}>Close</MDBBtn>
 50 |                                   <MDBBtn color="primary" onClick={this.toggle(1)}>Save changes</MDBBtn>
 51 |                                   </MDBModalBody>
 52 |                               </MDBModal>
 53 |                               <MDBModal toggle={this.toggle(2)} isOpen={this.state.modal2} position="bottom" frame>
 54 |                                   <MDBModalBody className="text-center">
 55 |                                   <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
 56 |                                   <MDBBtn color="secondary" onClick={this.toggle(2)}>Close</MDBBtn>
 57 |                                   <MDBBtn color="primary" onClick={this.toggle(2)}>Save changes</MDBBtn>
 58 |                                   </MDBModalBody>
 59 |                               </MDBModal>
 60 |                           </div>
 61 |                       </MDBCol>
 62 |                       <MDBCol md="3" className="mb-3">
 63 |                           <h5 className="text-center mb-3">Side modal</h5>
 64 |                           <img className="img-fluid z-depth-1" src="https://mdbootstrap.com/img/brandflow/modal3.jpg" alt="frame position"/>
 65 |                           <div className="text-center">
 66 |                               <h5 className="my-3">Position</h5>
 67 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(3)}>Top Right</MDBBtn>
 68 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(4)}>Top Left</MDBBtn>
 69 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(5)}>Bottom Right</MDBBtn>
 70 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(6)}>Bottom Left</MDBBtn>
 71 |                               <MDBModal toggle={this.toggle(3)} isOpen={this.state.modal3} side position="top-right">
 72 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
 73 |                                 <MDBModalBody className="text-center">
 74 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
 75 |                                 <MDBBtn color="secondary" onClick={this.toggle(3)}>Close</MDBBtn>
 76 |                                 </MDBModalBody>
 77 |                               </MDBModal>
 78 |                               <MDBModal toggle={this.toggle(4)} isOpen={this.state.modal4} side position="top-left">
 79 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
 80 |                                 <MDBModalBody className="text-center">
 81 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
 82 |                                 <MDBBtn color="secondary" onClick={this.toggle(4)}>Close</MDBBtn>
 83 |                                 </MDBModalBody>
 84 |                               </MDBModal>
 85 |                               <MDBModal toggle={this.toggle(5)} isOpen={this.state.modal5} side position="bottom-right">
 86 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
 87 |                                 <MDBModalBody className="text-center">
 88 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
 89 |                                 <MDBBtn color="secondary" onClick={this.toggle(5)}>Close</MDBBtn>
 90 |                                 </MDBModalBody>
 91 |                               </MDBModal>
 92 |                               <MDBModal toggle={this.toggle(6)} isOpen={this.state.modal6} side position="bottom-left">
 93 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
 94 |                                 <MDBModalBody className="text-center">
 95 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
 96 |                                 <MDBBtn color="secondary" onClick={this.toggle(6)}>Close</MDBBtn>
 97 |                                 </MDBModalBody>
 98 |                               </MDBModal>
 99 |                           </div>
100 |                       </MDBCol>
101 |                       <MDBCol md="3" className="mb-3">
102 |                           <h5 className="text-center mb-3">Central modal</h5>
103 |                           <img className="img-fluid z-depth-1" src="https://mdbootstrap.com/img/brandflow/modal2.jpg" alt="frame position"/>
104 |                           <div className="text-center">
105 |                               <h5 className="my-3">Size</h5>
106 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(7)}>Small</MDBBtn>
107 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(8)}>Medium</MDBBtn>
108 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(9)}>Large</MDBBtn>
109 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(10)}>Fluid</MDBBtn>
110 |                               <MDBModal toggle={this.toggle(7)} isOpen={this.state.modal7} size="sm">
111 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
112 |                                 <MDBModalBody className="text-center">
113 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
114 |                                 <MDBBtn color="secondary" onClick={this.toggle(7)}>Close</MDBBtn>
115 |                                 </MDBModalBody>
116 |                               </MDBModal>
117 |                               <MDBModal toggle={this.toggle(8)} isOpen={this.state.modal8} >
118 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
119 |                                 <MDBModalBody className="text-center">
120 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
121 |                                 <MDBBtn color="secondary" onClick={this.toggle(8)}>Close</MDBBtn>
122 |                                 </MDBModalBody>
123 |                               </MDBModal>
124 |                               <MDBModal toggle={this.toggle(9)} isOpen={this.state.modal9} size="lg">
125 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
126 |                                 <MDBModalBody className="text-center">
127 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
128 |                                 <MDBBtn color="secondary" onClick={this.toggle(9)}>Close</MDBBtn>
129 |                                 </MDBModalBody>
130 |                               </MDBModal>
131 |                               <MDBModal toggle={this.toggle(10)} isOpen={this.state.modal10} size="fluid">
132 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
133 |                                 <MDBModalBody className="text-center">
134 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
135 |                                 <MDBBtn color="secondary" onClick={this.toggle(10)}>Close</MDBBtn>
136 |                                 </MDBModalBody>
137 |                               </MDBModal>
138 |                           </div>
139 |                       </MDBCol>
140 |                       <MDBCol md="3" className="mb-3">
141 |                           <h5 className="text-center mb-3">Fluid modal</h5>
142 |                           <img className="img-fluid z-depth-1" src="https://mdbootstrap.com/img/brandflow/modal1.jpg" alt="frame position"/>
143 |                           <div className="text-center">
144 |                               <h5 className="my-3">Position</h5>
145 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(11)}>Right</MDBBtn>
146 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(12)}>Left</MDBBtn>
147 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(13)}>Top</MDBBtn>
148 |                               <MDBBtn color="primary" size="sm" onClick={this.toggle(14)}>Bottom</MDBBtn>
149 |                               <MDBModal toggle={this.toggle(11)} isOpen={this.state.modal11} fullHeight position="right">
150 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
151 |                                 <MDBModalBody className="text-center">
152 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
153 |                                 <MDBBtn color="secondary" onClick={this.toggle(11)}>Close</MDBBtn>
154 |                                 </MDBModalBody>
155 |                               </MDBModal>
156 |                               <MDBModal toggle={this.toggle(12)} isOpen={this.state.modal12} fullHeight position="left">
157 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
158 |                                 <MDBModalBody className="text-center">
159 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
160 |                                 <MDBBtn color="secondary" onClick={this.toggle(12)}>Close</MDBBtn>
161 |                                 </MDBModalBody>
162 |                               </MDBModal>
163 |                               <MDBModal toggle={this.toggle(13)} isOpen={this.state.modal13} fullHeight position="top">
164 |                                 <MDBModalHeader>Modal    Title</MDBModalHeader>
165 |                                 <MDBModalBody className="text-center">
166 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
167 |                                 <MDBBtn color="secondary" onClick={this.toggle(13)}>Close</MDBBtn>
168 |                                 </MDBModalBody>
169 |                               </MDBModal>
170 |                               <MDBModal toggle={this.toggle(14)} isOpen={this.state.modal14} fullHeight position="bottom">
171 |                                 <MDBModalHeader>Modal Title</MDBModalHeader>
172 |                                 <MDBModalBody className="text-center">
173 |                                 <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos...</span>
174 |                                 <MDBBtn color="secondary" onClick={this.toggle(14)}>Close</MDBBtn>
175 |                                 </MDBModalBody>
176 |                               </MDBModal>
177 |                           </div>
178 |                       </MDBCol>
179 |                   </MDBRow>
180 |                   </MDBCardBody>
181 |                 </MDBCard>
182 |               </MDBCol>
183 |         )
184 |     }
185 | }
186 | 
187 | export default ModalSection;


--------------------------------------------------------------------------------