React App

├── .gitignore ├── README.md ├── license.pdf ├── package.json ├── public ├── index.html └── manifest.json └── src ├── App.css ├── App.js ├── App.test.js ├── assets ├── img-1.jpg └── mdb-react.png ├── components ├── Footer.js ├── Routes.js ├── pages │ ├── DashboardPage.js │ ├── MapsPage.js │ ├── NotFoundPage.js │ ├── ProfilePage.js │ ├── TablesPage.js │ └── sections │ │ ├── AdminCardSection1.js │ │ ├── AdminCardSection2.js │ │ ├── BreadcrumSection.js │ │ ├── ChartSection1.js │ │ ├── ChartSection2.js │ │ ├── MapSection.js │ │ ├── ModalSection.js │ │ └── TableSection.js ├── sideNavigation.js └── topNavigation.js ├── index.css ├── index.js ├── logo.svg └── registerServiceWorker.js /.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 | ``` -------------------------------------------------------------------------------- /license.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdbootstrap/Admin-Dashboard-Template-React-Bootstrap/ed37f82ce3e879d0b276802960629d7933b333f1/license.pdf -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mdb-react-admin-template", 3 | "version": "1.0.0", 4 | "description": "MDB - React Admin Dashboard Free", 5 | "author": "MDBootstrap ", 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 | } -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 13 | 22 | React App 23 | 24 | 25 | 28 |

29 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /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/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdbootstrap/Admin-Dashboard-Template-React-Bootstrap/ed37f82ce3e879d0b276802960629d7933b333f1/src/App.css -------------------------------------------------------------------------------- /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 |

13 | 14 | 15 |

16 | 17 |

18 |

20 | ); 21 | } 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /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(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /src/assets/img-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdbootstrap/Admin-Dashboard-Template-React-Bootstrap/ed37f82ce3e879d0b276802960629d7933b333f1/src/assets/img-1.jpg -------------------------------------------------------------------------------- /src/assets/mdb-react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mdbootstrap/Admin-Dashboard-Template-React-Bootstrap/ed37f82ce3e879d0b276802960629d7933b333f1/src/assets/mdb-react.png -------------------------------------------------------------------------------- /src/components/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { MDBFooter, MDBBtn, MDBIcon } from 'mdbreact'; 3 | 4 | const Footer = () => { 5 | return ( 6 | 7 |

8 | Download MDB 9 | Start free tutorial 10 |

11 |

12 |

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

22 |

23 | © {new Date().getFullYear()} Copyright: MDBootstrap.com 24 |

25 | 26 | ); 27 | } 28 | 29 | export default Footer; -------------------------------------------------------------------------------- /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 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | } 22 | } 23 | 24 | export default Routes; 25 | -------------------------------------------------------------------------------- /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 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ) 27 | } 28 | 29 | export default DashboardPage; -------------------------------------------------------------------------------- /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 | 8 | 9 | 10 | 11 | 12 |

13 | Regular map 14 |

15 | 16 | 17 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |

28 | Hybrid map 29 |

30 | 31 | 32 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 |

48 | Satellite map 49 |

50 | 51 | 52 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |

66 | Terrain map 67 |

68 | 69 | 70 | 77 | 78 | 79 | 80 | 81 | 82 | ) 83 | } 84 | 85 | export default MapsPage; -------------------------------------------------------------------------------- /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 | 9 |

10 | 11 | 12 |

13 |

404. That's an error.

14 |

The requested URL was not found on this server.

15 | 16 | 17 | Error 404

18 | 19 | 20 |

21 | 22 | ) 23 | } 24 | 25 | export default NotFoundPage; -------------------------------------------------------------------------------- /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 | 8 | 9 | 10 | 11 | 12 | 13 | Alice Mayer 14 | Photographer 15 | 16 | About: 17 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione perferendis quod animi dignissimos consectetur quibusdam numquam laboriosam, minus, provident... 18 | 19 |

20 | More... 21 |

22 | 23 | 24 | 25 | 26 |

27 | 28 | 29 | 30 | 31 |

32 | 33 | 34 | 35 | 36 | Project name 37 | 38 | Some quick example text to build on the card title and make up the bulk of the card's content. 39 | 40 | 41 | 42 | 43 | Live Preview 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | Project

54 | 55 | 56 | 57 | 58 | Project name 59 | 60 | Some quick example text to build on the card title and make up the bulk of the card's content. 61 | 62 | 63 | 64 | 65 | Live Preview 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 |

78 | 79 | 80 | 81 | 82 | Project name 83 | 84 | Some quick example text to build on the card title and make up the bulk of the card's content. 85 | 86 | 87 | 88 | 89 | Live Preview 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | Project

100 | 101 | 102 | 103 | 104 | Project name 105 | 106 | Some quick example text to build on the card title and make up the bulk of the card's content. 107 | 108 | 109 | 110 | 111 | Live Preview 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 |

120 | 121 | 122 | 123 | ); 124 | } 125 | 126 | export default ProfilePage; -------------------------------------------------------------------------------- /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 | 8 | 9 | 10 | 11 |

Basic tables

12 | 13 | 14 |

Basic examples

15 |

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.

16 | 17 | 18 | 19 | # 20 | First 21 | Last 22 | Handle 23 | 24 | 25 | 26 | 27 | 1 28 | Mark 29 | Otto 30 | @mdo 31 | 32 | 33 | 2 34 | Jacob 35 | Thornton 36 | @fat 37 | 38 | 39 | 3 40 | Larry 41 | the Bird 42 | @twitter 43 | 44 | 45 | 46 |

MDBTable head options

47 |

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.

48 | 49 | 50 | 51 | # 52 | First 53 | Last 54 | Handle 55 | 56 | 57 | 58 | 59 | 1 60 | Mark 61 | Otto 62 | @mdo 63 | 64 | 65 | 2 66 | Jacob 67 | Thornton 68 | @fat 69 | 70 | 71 | 3 72 | Larry 73 | the Bird 74 | @twitter 75 | 76 | 77 | 78 | 79 | 80 | 81 | # 82 | First 83 | Last 84 | Handle 85 | 86 | 87 | 88 | 89 | 1 90 | Mark 91 | Otto 92 | @mdo 93 | 94 | 95 | 2 96 | Jacob 97 | Thornton 98 | @fat 99 | 100 | 101 | 3 102 | Larry 103 | the Bird 104 | @twitter 105 | 106 | 107 | 108 |

Striped rows.

109 |

Use prop striped to add zebra-striping to any table row within the table body

110 | 111 | 112 | 113 | # 114 | First 115 | Last 116 | Handle 117 | 118 | 119 | 120 | 121 | 1 122 | Mark 123 | Otto 124 | @mdo 125 | 126 | 127 | 2 128 | Jacob 129 | Thornton 130 | @fat 131 | 132 | 133 | 3 134 | Larry 135 | the Bird 136 | @twitter 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | ) 146 | } 147 | 148 | export default TablesPage; -------------------------------------------------------------------------------- /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 | 7 | 8 | 9 |

10 | 11 |

12 |

SALES

13 |

14 | $2000 15 |

16 |

17 |

18 | 19 |

20 |

22 |

23 | Better than last week (25%) 24 | 25 | 26 | 27 | 28 | 29 |

30 | 31 |

32 |

SUBSCRIPTIONS

33 |

34 | 200 35 |

36 |

37 |

38 | 39 |

40 |

42 |

43 | Worse than last week (25%) 44 | 45 | 46 | 47 | 48 | 49 |

50 | 51 |

52 |

TRAFFIC

53 |

54 | 20000 55 |

56 |

57 |

58 | 59 |

60 |

62 |

63 | Worse than last week (75%) 64 | 65 | 66 | 67 | 68 | 69 |

70 | 71 |

72 |

ORGANIC TRAFFIC

73 |

74 | 2000 75 |

76 |

77 |

78 | 79 |

80 |

82 |

83 | Better than last week (25%) 84 | 85 | 86 | 87 | 88 | ) 89 | } 90 | 91 | export default AdminCardSection1; 92 | 93 | -------------------------------------------------------------------------------- /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 | 7 | 8 | 9 | 10 |

11 | 12 |

13 |

SALES

14 |

$2000

15 | 16 |

17 |

18 |

19 | 20 |

Better than last week (25%)

21 | 22 | 23 | 24 | 25 | 26 | 27 |

28 | 29 |

30 |

SUBSCRIPTIONS

31 |

200

32 | 33 |

34 |

35 |

36 | 37 |

Worse than last week (25%)

38 | 39 | 40 | 41 | 42 | 43 | 44 |

45 | 46 |

47 |

TRAFFIC

48 |

20000

49 | 50 |

51 |

52 |

53 | 54 |

Better than last week (75%)

55 | 56 | 57 | 58 | 59 | 60 | 61 |

62 | 63 |

64 |

ORGANIC TRAFFIC

65 |

2000

66 | 67 |

68 |

69 |

70 | 71 |

Better than last week (75%)

72 | 73 | 74 | 75 | 76 | ) 77 | } 78 | 79 | export default AdminCardSection2; 80 | 81 | -------------------------------------------------------------------------------- /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 | 7 | 17 | 18 | ) 19 | } 20 | 21 | export default BreadcrumSection; 22 | 23 | -------------------------------------------------------------------------------- /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 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | Pie chart 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | Sales 83 | 84 | 22% 85 | 86 | 87 | 88 | 89 | Traffic 90 | 91 | 5% 92 | 93 | 94 | 95 | 96 | Orders 97 | 98 | 14 99 | 100 | 101 | 102 | Issues 103 | 104 | 123 105 | 106 | 107 | 108 | Messages 109 | 110 | 8 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | ) 119 | } 120 | } 121 | 122 | export default ChartSection1; 123 | 124 | -------------------------------------------------------------------------------- /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 | 66 | 67 | 68 | Line chart 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | Radar chart 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | Doughnut chart 85 | 86 | 87 | 88 | 89 | 90 | 91 | ) 92 | } 93 | 94 | } 95 | 96 | export default ChartSection2; 97 | 98 | -------------------------------------------------------------------------------- /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 | 8 | 9 | Google Map 10 | 11 | 15 | 16 | 17 | 18 | ) 19 | } 20 | 21 | export default MapSection; 22 | 23 | -------------------------------------------------------------------------------- /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 | 31 | 32 | Modals 33 | 34 |

Position & Sizes

35 |

36 |

Click buttons below to launch modals demo

37 |

38 | 39 | 40 |

Frame modal

41 |

42 |

43 |

Position

44 | Top 45 | Bottom 46 | 47 | 48 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 49 | Close 50 | Save changes 51 | 52 | 53 | 54 | 55 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 56 | Close 57 | Save changes 58 | 59 | 60 |

61 | 62 | 63 |

Side modal

64 |

65 |

66 |

Position

67 | Top Right 68 | Top Left 69 | Bottom Right 70 | Bottom Left 71 | 72 | Modal Title 73 | 74 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 75 | Close 76 | 77 | 78 | 79 | Modal Title 80 | 81 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 82 | Close 83 | 84 | 85 | 86 | Modal Title 87 | 88 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 89 | Close 90 | 91 | 92 | 93 | Modal Title 94 | 95 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 96 | Close 97 | 98 | 99 |

100 | 101 | 102 |

Central modal

103 |

104 |

105 |

Size

106 | Small 107 | Medium 108 | Large 109 | Fluid 110 | 111 | Modal Title 112 | 113 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 114 | Close 115 | 116 | 117 | 118 | Modal Title 119 | 120 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 121 | Close 122 | 123 | 124 | 125 | Modal Title 126 | 127 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 128 | Close 129 | 130 | 131 | 132 | Modal Title 133 | 134 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 135 | Close 136 | 137 | 138 |

139 | 140 | 141 |

Fluid modal

142 |

143 |

144 |

Position

145 | Right 146 | Left 147 | Top 148 | Bottom 149 | 150 | Modal Title 151 | 152 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 153 | Close 154 | 155 | 156 | 157 | Modal Title 158 | 159 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 160 | Close 161 | 162 | 163 | 164 | Modal Title 165 | 166 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 167 | Close 168 | 169 | 170 | 171 | Modal Title 172 | 173 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo provident fugiat reprehenderit nostrum quos... 174 | Close 175 | 176 | 177 |

178 | 179 | 180 | 181 | 182 | 183 | ) 184 | } 185 | } 186 | 187 | export default ModalSection; -------------------------------------------------------------------------------- /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 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | # 14 | First 15 | Last 16 | Handle 17 | 18 | 19 | 20 | 21 | 1 22 | Mark 23 | Otto 24 | @mdo 25 | 26 | 27 | 2 28 | Jacob 29 | Thornton 30 | @fat 31 | 32 | 33 | 3 34 | Larry 35 | the Bird 36 | @twitter 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | # 50 | First 51 | Last 52 | Handle 53 | 54 | 55 | 56 | 57 | 1 58 | Mark 59 | Otto 60 | @mdo 61 | 62 | 63 | 2 64 | Jacob 65 | Thornton 66 | @fat 67 | 68 | 69 | 3 70 | Larry 71 | the Bird 72 | @twitter 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | ) 81 | } 82 | 83 | export default TableSection; 84 | 85 | -------------------------------------------------------------------------------- /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 |

9 | 10 |

11 | 12 | 13 | 14 | 15 | 16 | Dashboard 17 | 18 | 19 | 20 | 21 | 22 | Profile 23 | 24 | 25 | 26 | 27 | 28 | Tables 29 | 30 | 31 | 32 | 33 | 34 | Maps 35 | 36 | 37 | 38 | 39 | 40 | 404 41 | 42 | 43 | 44 |

45 | ); 46 | } 47 | 48 | export default TopNavigation; -------------------------------------------------------------------------------- /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 | 24 | 25 | MDB 26 | 27 | 28 | 29 | 30 | 31 | Home 32 | 33 | 34 | About MDB 35 | 36 | 37 | Free download 38 | 39 | 40 | Free tutorials 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | MDB GitHub 52 | 53 | 54 | Go Pro 55 | 56 | 57 | 58 | 59 | ); 60 | } 61 | } 62 | 63 | export default TopNavigation; -------------------------------------------------------------------------------- /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/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(, document.getElementById('root')); 13 | registerServiceWorker(); 14 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------