gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CoreUI-React initial commit v2.0.0-alpha.1

Browse Source
This commit is contained in:
xidedix 2018-03-13 17:36:17 +01:00
parent d1c1987014
commit 28669bed46
107 changed files with 15271 additions and 3478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.babelrc
View File

@ -1,6 +0,0 @@
{
"presets": [
["react"], ["env"]
],
"plugins": ["transform-object-rest-spread"]
}

21
.gitignore vendored
View File

@ -1,19 +1,22 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
node_modules
package-lock.json
/node_modules
# testing
coverage
/coverage
# production
build
/build
# misc
.DS_Store
Thumbs.db
.env
.idea
npm-debug.log
compilation-stats.json
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

6
CHANGELOG.md
View File

@ -1,5 +1,11 @@
## [react](./REACT.md) version `changelog`
##### `v2.0.0-alpha.1`
- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
- refactor: project structure change
- refactor: moved to [Create-React-App](CRA.md)
- chore: moved to [Semantic Versioning](https://semver.org/)
##### `v1.0.10`
- refactor: `<InputGroupAddon addonType="prepend">`
- refactor: `<InputGroupAddon addonType="append">`

2434
CRA.md Normal file
View File

File diff suppressed because it is too large Load Diff

30
REACT.md
View File

@ -1,29 +1,31 @@
# React version
# CoreUI React version
## Intro
It uses Sass (with .scss). The style is loaded at the component level.
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
Dependencies can be handled by **npm**.
It uses Sass (with .scss). The styles are loaded at the template level
Dependencies are handled by **npm**.
## Directories
```
React_Full_Project/
├── src/ (js|jsx source)
├── scss/ (scss source)
CoreUI-React#v2.0.0
├── public/ (html template)
├── img/ (images)
├── assets/ (static assets)
├── src/ (project root)
├── containers/ (container source)
├── scss/ (scss/css source)
├── views/ (views source)
```
## Usage
**npm i** - to install dependencies
`npm i` - to install dependencies
## Sctipts
**npm start** for developing (it runs webpack-dev-server)
**npm run build** to run a dev build
**npm run clean** to clean build dir
**npm run dev** to run a dev build with watching filesystem for changes
## Sctipts
`npm start` for developing (it runs webpack-dev-server)
`npm run build` to run a dev build
## See also
[Create-React-App](CRA.md)
[Changelog](./CHANGELOG.md)
[Readme](./README.md)

69
README.md
View File

@ -1,69 +0,0 @@
# CoreUI React - Free Bootstrap Admin Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20React%20Admin%20Template%20&url=http://coreui.io/react/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
### Check out our React Admin Templates and support CoreUI Development
[![Bootstrap Admin Templates Bundle](https://genesisui.com/img/bundle2.png)](https://genesisui.com/bundle.html?support=1)
[Check out React Admin Templates Bundle](https://genesisui.com/bundle.html?support=1)
This is React.js version of our Bootstrap 4 admin template [CoreUI](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
Please help us on [Product Hunt](https://www.producthunt.com/posts/coreui-open-source-bootstrap-4-admin-template-with-angular-2-react-js-vue-js-support) & [Designer News](https://www.designernews.co/stories/81127). Thanks in advance!
Why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Boostrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)
CoreUI is an Open Source React & Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high quality icons.
CoreUI is based on Bootstrap 4 and offers 6 versions: [HTML5 AJAX](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [HTML5 Static](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [AngularJS](https://github.com/mrholek/CoreUI-AngularJS), [Angular 2+](https://github.com/mrholek/CoreUI-Angular), [React.js](https://github.com/mrholek/CoreUI-React) & [Vue.js](https://github.com/mrholek/CoreUI-Vue).
CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
[![CoreUI React Free Bootstrap Admin Template](http://coreui.io/assets/img/coreui.png "CoreUI React Free Bootstrap Admin Template")](http://coreui.io)
**NOTE:** Please remember to **STAR** this project and **FOLLOW** [my Github](https://github.com/mrholek) to keep you update with this template.
## Demo
A fully functional demo is available at [CoreUI](http://coreui.io/)
## What's included
Within the download you'll find the following directories and files, You'll see something like this:
```
CoreUI-React/
├── React_Full_Project/
├── React_Starter/
```
## Other Versions
CoreUI includes 6 Version for Angular 4, AngularJS, React.js, Vue.js, Static HTML5 and AJAX HTML5.
* [Angular Version (Angular 2+)](https://github.com/mrholek/CoreUI-Angular).
* [AngularJS Version](https://github.com/mrholek/CoreUI-AngularJS).
* [HTML5 AJAX Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
* [HTML5 Static Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
* [React.js Version](https://github.com/mrholek/CoreUI-React).
* [Vue.js Version](https://github.com/mrholek/CoreUI-Vue).
## Bugs and feature requests
Have a bug or a feature request? [Please open a new issue](https://github.com/mrholek/CoreUI-React/issues/new).
## Documentation
CoreUI's documentation, is hosted on our website [CoreUI](http://coreui.io/)
## Copyright and license
copyright 2017 creativeLabs Łukasz Holeczek. Code released under [the MIT license](https://github.com/mrholek/CoreUI-React/blob/master/LICENSE).
creativeLabs Łukasz Holeczek reserves the right to change the license of future releases. You can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI.
## Support CoreUI Development
CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by donating on [PayPal](https://www.paypal.me/holeczek) or buying one of our [premium bootstrap 4 admin templates](https://genesisui.com/?support=1).
As of now I am exploring the possibility of working on CoreUI fulltime - if you are a business that is building core products using CoreUI, I am also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on [Twitter](https://twitter.com/lukaszholeczek).

74
package.json
View File

@ -1,57 +1,49 @@
{
"name": "@coreui/react",
"version": "1.0.10",
"description": "Open Source Bootstrap Admin Template",
"name": "CoreUI-React",
"version": "2.0.0-alpha.1",
"description": "CoreUI React Open Source Bootstrap 4 Admin Template",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
"copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
"license": "MIT",
"private": true,
"devDependencies": {
"babel-core": "6.26.0",
"babel-loader": "7.1.2",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.6",
"css-loader": "0.28.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"html-webpack-plugin": "2.30.1",
"node-sass": "4.7.2",
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
"style-loader": "0.20.1",
"uglify-js": "3.3.9",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.11.1"
"repository": {
"type": "git",
"url": "git@github.com:mrholek/CoreUI-React.git"
},
"dependencies": {
"@coreui/styles": "git://github.com/coreui/styles.git",
"@coreui/react-dev": "git://github.com/coreui/react.git",
"bootstrap": "4.0.0",
"chart.js": "2.7.1",
"flag-icon-css": "2.9.0",
"font-awesome": "4.7.0",
"history": "4.7.2",
"react": "16.2.0",
"chart.js": "2.7.2",
"classnames": "^2.2.3",
"flag-icon-css": "3.0.0",
"font-awesome": "^4.7.0",
"node-sass-chokidar": "^1.1.0",
"prop-types": "^15.5.8",
"react": "^16.2.0",
"react-chartjs-2": "2.7.0",
"react-dom": "16.2.0",
"react-router-dom": "4.2.2",
"react-transition-group": "2.2.1",
"react-dom": "^16.2.0",
"react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"reactstrap": "5.0.0-beta",
"simple-line-icons": "2.4.1"
"simple-line-icons": "^2.4.1"
},
"devDependencies": {
"npm-run-all": "^4.1.2"
},
"scripts": {
"dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
"start": "webpack-dev-server --progress --color --inline --env.dev",
"build": "webpack -p --progress --env.prod",
"clean": "rimraf ./build"
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"start-js": "react-scripts start",
"start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"engines": {
"node": ">= 8.9.4",
"npm": ">= 5.6.0"
"bugs": {
"url": "https://github.com/mrholek/CoreUI-React/issues"
}
}

0
public/assets/.gitkeep Normal file
View File

0
public/img/avatars/1.jpg → public/assets/img/avatars/1.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

0
public/img/avatars/2.jpg → public/assets/img/avatars/2.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

0
public/img/avatars/3.jpg → public/assets/img/avatars/3.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
public/img/avatars/4.jpg → public/assets/img/avatars/4.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

0
public/img/avatars/5.jpg → public/assets/img/avatars/5.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

0
public/img/avatars/6.jpg → public/assets/img/avatars/6.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
public/img/avatars/7.jpg → public/assets/img/avatars/7.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

0
public/img/avatars/8.jpg → public/assets/img/avatars/8.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

106
public/img/brand/logo.svg → public/assets/img/brand/logo.svg
View File

@ -1,53 +1,53 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="707.1px" height="200px" viewBox="0 0 707.1 200" style="enable-background:new 0 0 707.1 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1FA8D7;}
.st1{fill:#FFFFFF;}
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
.st5{fill:#333333;}
.st6{fill:#1EA7D6;}
</style>
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
86.6,166.7 144.3,133.3 115.5,116.7 "/>
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
<g>
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="707.1px" height="200px" viewBox="0 0 707.1 200" style="enable-background:new 0 0 707.1 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1FA8D7;}
.st1{fill:#FFFFFF;}
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
.st5{fill:#333333;}
.st6{fill:#1EA7D6;}
</style>
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
86.6,166.7 144.3,133.3 115.5,116.7 "/>
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
<g>
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

106
public/img/brand/sygnet.svg → public/assets/img/brand/sygnet.svg
View File

@ -1,53 +1,53 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="173.2px" height="200px" viewBox="0 0 173.2 200" style="enable-background:new 0 0 173.2 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1FA8D7;}
.st1{fill:#FFFFFF;}
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
.st5{fill:#333333;}
.st6{fill:#1EA7D6;}
</style>
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
86.6,166.7 144.3,133.3 115.5,116.7 "/>
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
<g>
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="173.2px" height="200px" viewBox="0 0 173.2 200" style="enable-background:new 0 0 173.2 200;" xml:space="preserve">
<style type="text/css">
.st0{fill:#1FA8D7;}
.st1{fill:#FFFFFF;}
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
.st5{fill:#333333;}
.st6{fill:#1EA7D6;}
</style>
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
86.6,166.7 144.3,133.3 115.5,116.7 "/>
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
<polygon class="st4" points="86.6,100 0,50 0,150 "/>
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
<g>
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
C289.3,127.4,289.9,127.3,290.4,127.3z"/>
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/assets/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

33
public/index.html
View File

@ -1,14 +1,28 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
<meta name="description" content="%THEMENAME% - %THEMEDESC%">
<meta name="author" content="Łukasz Holeczek">
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js">
<link rel="shortcut icon" href="img/favicon.png">
<title>CoreUI - Open Source Bootstrap Admin Template</title>
<meta name="keyword" content="%THEMEKEYWORDS%">
<title>%THEMENAME% - %THEMEDESC%</title>
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
</head>
<!-- BODY options, add following classes to body to change options
@ -39,7 +53,10 @@
-->
<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
@ -48,8 +65,8 @@
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

15
public/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"short_name": "CoreUI-React",
"name": "CoreUI-React sample",
"icons": [
{
"src": "./assets/favicon.png",
"sizes": "100x100",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

1
src/App.css Normal file
View File

@ -0,0 +1 @@

38
src/App.js Normal file
View File

@ -0,0 +1,38 @@
import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import './App.css';
// Styles
// Import Flag Icons Set
import 'flag-icon-css/css/flag-icon.min.css';
// Import Font Awesome Icons Set
import 'font-awesome/css/font-awesome.min.css';
// Import Simple Line Icons Set
import 'simple-line-icons/css/simple-line-icons.css';
// Import Main styles for this application
import './scss/style.css'
// import '../node_modules/@coreui/styles/scss/_dropdown-menu-right.scss';
// Containers
import { Full } from './containers';
// Pages
import { Login, Page404, Page500, Register } from './views/Pages';
// import { renderRoutes } from 'react-router-config';
class App extends Component {
render() {
return (
<HashRouter>
<Switch>
<Route exact path="/login" name="Login Page" component={Login} />
<Route exact path="/register" name="Register Page" component={Register} />
<Route exact path="/404" name="Page 404" component={Page404} />
<Route exact path="/500" name="Page 500" component={Page500} />
<Route path="/" name="Home" component={Full} />
</Switch>
</HashRouter>
);
}
}
export default App;

9
src/App.test.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});

106
src/components/Sidebar/_nav.js → src/_nav.js
View File

@ -6,8 +6,8 @@ export default {
icon: 'icon-speedometer',
badge: {
variant: 'info',
text: 'NEW'
}
text: 'NEW',
},
},
{
title: true,
@ -33,7 +33,7 @@ export default {
name: 'Components',
wrapper: {
element: '',
attributes: {}
attributes: {},
},
},
{
@ -44,84 +44,84 @@ export default {
{
name: 'Breadcrumbs',
url: '/base/breadcrumbs',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Cards',
url: '/base/cards',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Carousels',
url: '/base/carousels',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Collapses',
url: '/base/collapses',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Dropdowns',
url: '/base/dropdowns',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Forms',
url: '/base/forms',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Jumbotrons',
url: '/base/jumbotrons',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'List groups',
url: '/base/list-groups',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Navs',
url: '/base/navs',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Paginations',
url: '/base/paginations',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Popovers',
url: '/base/popovers',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Progress Bar',
url: '/base/progress-bar',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Switches',
url: '/base/switches',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Tables',
url: '/base/tables',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Tabs',
url: '/base/tabs',
icon: 'icon-puzzle'
icon: 'icon-puzzle',
},
{
name: 'Tooltips',
url: '/base/tooltips',
icon: 'icon-puzzle'
}
]
icon: 'icon-puzzle',
},
],
},
{
name: 'Buttons',
@ -131,29 +131,29 @@ export default {
{
name: 'Buttons',
url: '/buttons/buttons',
icon: 'icon-cursor'
icon: 'icon-cursor',
},
{
name: 'Button dropdowns',
url: '/buttons/button-dropdowns',
icon: 'icon-cursor'
icon: 'icon-cursor',
},
{
name: 'Button groups',
url: '/buttons/button-groups',
icon: 'icon-cursor'
icon: 'icon-cursor',
},
{
name: 'Social Buttons',
url: '/buttons/social-buttons',
icon: 'icon-cursor'
}
]
icon: 'icon-cursor',
},
],
},
{
name: 'Charts',
url: '/charts',
icon: 'icon-pie-chart'
icon: 'icon-pie-chart',
},
{
name: 'Icons',
@ -166,8 +166,8 @@ export default {
icon: 'icon-star',
badge: {
variant: 'success',
text: 'NEW'
}
text: 'NEW',
},
},
{
name: 'Font Awesome',
@ -175,15 +175,15 @@ export default {
icon: 'icon-star',
badge: {
variant: 'secondary',
text: '4.7'
}
text: '4.7',
},
},
{
name: 'Simple Line Icons',
url: '/icons/simple-line-icons',
icon: 'icon-star'
}
]
icon: 'icon-star',
},
],
},
{
name: 'Notifications',
@ -193,19 +193,19 @@ export default {
{
name: 'Alerts',
url: '/notifications/alerts',
icon: 'icon-bell'
icon: 'icon-bell',
},
{
name: 'Badges',
url: '/notifications/badges',
icon: 'icon-bell'
icon: 'icon-bell',
},
{
name: 'Modals',
url: '/notifications/modals',
icon: 'icon-bell'
icon: 'icon-bell',
},
]
],
},
{
name: 'Widgets',
@ -213,15 +213,15 @@ export default {
icon: 'icon-calculator',
badge: {
variant: 'info',
text: 'NEW'
}
text: 'NEW',
},
},
{
divider: true
divider: true,
},
{
title: true,
name: 'Extras'
name: 'Extras',
},
{
name: 'Pages',
@ -231,37 +231,37 @@ export default {
{
name: 'Login',
url: '/login',
icon: 'icon-star'
icon: 'icon-star',
},
{
name: 'Register',
url: '/register',
icon: 'icon-star'
icon: 'icon-star',
},
{
name: 'Error 404',
url: '/404',
icon: 'icon-star'
icon: 'icon-star',
},
{
name: 'Error 500',
url: '/500',
icon: 'icon-star'
}
]
icon: 'icon-star',
},
],
},
{
name: 'Download CoreUI',
url: 'http://coreui.io/react/',
icon: 'icon-cloud-download',
class: 'mt-auto',
variant: 'success'
variant: 'success',
},
{
name: 'Try CoreUI PRO',
url: 'http://coreui.io/pro/react/',
icon: 'icon-layers',
variant: 'danger'
}
]
variant: 'danger',
},
],
};

6
src/components/Aside/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Aside",
"version": "0.0.0",
"private": true,
"main": "./Aside.js"
}

55
src/components/Breadcrumb/Breadcrumb.js
View File

@ -1,55 +0,0 @@
import React from 'react';
import {Route, Link} from 'react-router-dom';
import {Breadcrumb, BreadcrumbItem} from 'reactstrap';
import routes from '../../routes';
const findRouteName = url => routes[url];
const getPaths = (pathname) => {
const paths = ['/'];
if (pathname === '/') return paths;
pathname.split('/').reduce((prev, curr, index) => {
const currPath = `${prev}/${curr}`;
paths.push(currPath);
return currPath;
});
return paths;
};
const BreadcrumbsItem = ({...rest, match}) => {
const routeName = findRouteName(match.url);
if (routeName) {
return (
match.isExact ?
(
<BreadcrumbItem active>{routeName}</BreadcrumbItem>
) :
(
<BreadcrumbItem>
<Link to={match.url || ''}>
{routeName}
</Link>
</BreadcrumbItem>
)
);
}
return null;
};
const Breadcrumbs = ({...rest, location : {pathname}, match}) => {
const paths = getPaths(pathname);
const items = paths.map((path, i) => <Route key={i++} path={path} component={BreadcrumbsItem}/>);
return (
<Breadcrumb>
{items}
</Breadcrumb>
);
};
export default props => (
<div>
<Route path="/:path" component={Breadcrumbs} {...props} />
</div>
);

6
src/components/Breadcrumb/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Breadcrumb",
"version": "0.0.0",
"private": true,
"main": "./Breadcrumb.js"
}

14
src/components/Footer/Footer.js
View File

@ -1,14 +0,0 @@
import React, {Component} from 'react';
class Footer extends Component {
render() {
return (
<footer className="app-footer">
<span><a href="http://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
<span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>
)
}
}
export default Footer;

6
src/components/Footer/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Footer",
"version": "0.0.0",
"private": true,
"main": "./Footer.js"
}

80
src/components/Header/Header.js
View File

@ -1,80 +0,0 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
Nav,
NavbarBrand,
NavbarToggler,
NavItem,
NavLink,
Badge
} from 'reactstrap';
import HeaderDropdown from './HeaderDropdown';
class Header extends Component {
constructor(props) {
super(props);
}
sidebarToggle(e) {
e.preventDefault();
document.body.classList.toggle('sidebar-hidden');
}
sidebarMinimize(e) {
e.preventDefault();
document.body.classList.toggle('sidebar-minimized');
}
mobileSidebarToggle(e) {
e.preventDefault();
document.body.classList.toggle('sidebar-mobile-show');
}
asideToggle(e) {
e.preventDefault();
document.body.classList.toggle('aside-menu-hidden');
}
render() {
return (
<header className="app-header navbar">
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>
<span className="navbar-toggler-icon"></span>
</NavbarToggler>
<NavbarBrand href="#"></NavbarBrand>
<NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>
<span className="navbar-toggler-icon"></span>
</NavbarToggler>
<Nav className="d-md-down-none" navbar>
<NavItem className="px-3">
<NavLink href="#">Dashboard</NavLink>
</NavItem>
<NavItem className="px-3">
<NavLink href="#">Users</NavLink>
</NavItem>
<NavItem className="px-3">
<NavLink href="#">Settings</NavLink>
</NavItem>
</Nav>
<Nav className="ml-auto" navbar>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
</NavItem>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-list"></i></NavLink>
</NavItem>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
</NavItem>
<HeaderDropdown/>
</Nav>
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>
<span className="navbar-toggler-icon"></span>
</NavbarToggler>
</header>
);
}
}
export default Header;

60
src/components/Header/HeaderDropdown.js
View File

@ -1,60 +0,0 @@
import React, {Component} from 'react';
import {
Badge,
DropdownItem,
DropdownMenu,
DropdownToggle,
Dropdown
} from 'reactstrap';
class HeaderDropdown extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
dropAccnt() {
return (
<Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle nav>
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
<DropdownItem divider/>
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
render() {
const {...attributes} = this.props;
return (
this.dropAccnt()
);
}
}
export default HeaderDropdown;

6
src/components/Header/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Header",
"version": "0.0.0",
"private": true,
"main": "./Header.js"
}

164
src/components/Sidebar/Sidebar.js
View File

@ -1,164 +0,0 @@
import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import {Badge, Nav, NavItem, NavLink as RsNavLink} from 'reactstrap';
import classNames from 'classnames';
import nav from './_nav';
import SidebarFooter from './../SidebarFooter';
import SidebarForm from './../SidebarForm';
import SidebarHeader from './../SidebarHeader';
import SidebarMinimizer from './../SidebarMinimizer';
class Sidebar extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.activeRoute = this.activeRoute.bind(this);
this.hideMobile = this.hideMobile.bind(this);
}
handleClick(e) {
e.preventDefault();
e.target.parentElement.classList.toggle('open');
}
activeRoute(routeName, props) {
// return this.props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
return props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
}
hideMobile() {
if (document.body.classList.contains('sidebar-mobile-show')) {
document.body.classList.toggle('sidebar-mobile-show')
}
}
// todo Sidebar nav secondLevel
// secondLevelActive(routeName) {
// return this.props.location.pathname.indexOf(routeName) > -1 ? "nav nav-second-level collapse in" : "nav nav-second-level collapse";
// }
render() {
const props = this.props;
// badge addon to NavItem
const badge = (badge) => {
if (badge) {
const classes = classNames( badge.class );
return (<Badge className={ classes } color={ badge.variant }>{ badge.text }</Badge>)
}
};
// simple wrapper for nav-title item
const wrapper = item => { return (item.wrapper && item.wrapper.element ? (React.createElement(item.wrapper.element, item.wrapper.attributes, item.name)): item.name ) };
// nav list section title
const title = (title, key) => {
const classes = classNames( 'nav-title', title.class);
return (<li key={key} className={ classes }>{wrapper(title)} </li>);
};
// nav list divider
const divider = (divider, key) => {
const classes = classNames( 'divider', divider.class);
return (<li key={key} className={ classes }></li>);
};
// nav label with nav link
const navLabel = (item, key) => {
const classes = {
item: classNames( 'hidden-cn', item.class ),
link: classNames( 'nav-label', item.class ? item.class : ''),
icon: classNames(
!item.icon ? 'fa fa-circle' : item.icon ,
item.label.variant ? `text-${item.label.variant}` : '',
item.label.class ? item.label.class : ''
)
};
return (
navLink(item, key, classes)
);
};
// nav item with nav link
const navItem = (item, key) => {
const classes = {
item: classNames( item.class) ,
link: classNames( 'nav-link', item.variant ? `nav-link-${item.variant}` : ''),
icon: classNames( item.icon )
};
return (
navLink(item, key, classes)
)
};
// nav link
const navLink = (item, key, classes) => {
const url = item.url ? item.url : '';
return (
<NavItem key={key} className={classes.item}>
{ isExternal(url) ?
<RsNavLink href={url} className={classes.link} active>
<i className={classes.icon}></i>{item.name}{badge(item.badge)}
</RsNavLink>
:
<NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile}>
<i className={classes.icon}></i>{item.name}{badge(item.badge)}
</NavLink>
}
</NavItem>
)
};
// nav dropdown
const navDropdown = (item, key) => {
return (
<li key={key} className={this.activeRoute(item.url, props)}>
<a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={item.icon}></i>{item.name}</a>
<ul className="nav-dropdown-items">
{navList(item.children)}
</ul>
</li>)
};
// nav type
const navType = (item, idx) =>
item.title ? title(item, idx) :
item.divider ? divider(item, idx) :
item.label ? navLabel(item, idx) :
item.children ? navDropdown(item, idx)
: navItem(item, idx) ;
// nav list
const navList = (items) => {
return items.map( (item, index) => navType(item, index) );
};
const isExternal = (url) => {
const link = url ? url.substring(0, 4) : '';
return link === 'http';
};
// sidebar-nav root
return (
<div className="sidebar">
<SidebarHeader/>
<SidebarForm/>
<nav className="sidebar-nav">
<Nav>
{navList(nav.items)}
</Nav>
</nav>
<SidebarFooter/>
<SidebarMinimizer/>
</div>
)
}
}
export default Sidebar;

6
src/components/Sidebar/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Sidebar",
"version": "0.0.0",
"private": true,
"main": "./Sidebar.js"
}

14
src/components/SidebarFooter/SidebarFooter.js
View File

@ -1,14 +0,0 @@
import React, {Component} from 'react';
class SidebarFooter extends Component {
render() {
return null
// Uncomment following code lines to add Sidebar Footer
// return (
// <div className="sidebar-footer"></div>
// )
}
}
export default SidebarFooter;

6
src/components/SidebarFooter/package.json
View File

@ -1,6 +0,0 @@
{
"name": "SidebarFooter",
"version": "0.0.0",
"private": true,
"main": "./SidebarFooter.js"
}

14
src/components/SidebarForm/SidebarForm.js
View File

@ -1,14 +0,0 @@
import React, {Component} from 'react';
class SidebarForm extends Component {
render() {
return null
// Uncomment following code lines to add Sidebar Form
// return (
// <div className="sidebar-form"></div>
// )
}
}
export default SidebarForm;

6
src/components/SidebarForm/package.json
View File

@ -1,6 +0,0 @@
{
"name": "SidebarForm",
"version": "0.0.0",
"private": true,
"main": "./SidebarForm.js"
}

14
src/components/SidebarHeader/SidebarHeader.js
View File

@ -1,14 +0,0 @@
import React, {Component} from 'react';
class SidebarHeader extends Component {
render() {
return null
// Uncomment following code lines to add Sidebar Header
// return (
// <div className="sidebar-header"></div>
// )
}
}
export default SidebarHeader;

6
src/components/SidebarHeader/package.json
View File

@ -1,6 +0,0 @@
{
"name": "SidebarHeader",
"version": "0.0.0",
"private": true,
"main": "./SidebarHeader.js"
}

20
src/components/SidebarMinimizer/SidebarMinimizer.js
View File

@ -1,20 +0,0 @@
import React, {Component} from 'react';
class SidebarMinimizer extends Component {
sidebarMinimize() {
document.body.classList.toggle('sidebar-minimized');
}
brandMinimize() {
document.body.classList.toggle('brand-minimized');
}
render() {
return (
<button className="sidebar-minimizer" type="button" onClick={(event) => { this.sidebarMinimize(); this.brandMinimize() }}></button>
)
}
}
export default SidebarMinimizer;

6
src/components/SidebarMinimizer/package.json
View File

@ -1,6 +0,0 @@
{
"name": "SidebarMinimizer",
"version": "0.0.0",
"private": true,
"main": "./SidebarMinimizer.js"
}

143
src/containers/Full/Full.js
View File

@ -1,105 +1,72 @@
import React, {Component} from 'react';
import {Switch, Route, Redirect} from 'react-router-dom';
import {Container} from 'reactstrap';
import Header from '../../components/Header/';
import Sidebar from '../../components/Sidebar/';
import Breadcrumb from '../../components/Breadcrumb/';
import Aside from '../../components/Aside/';
import Footer from '../../components/Footer/';
import React, { Component } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import { Container } from 'reactstrap';
import Dashboard from '../../views/Dashboard/';
import Colors from '../../views/Theme/Colors/';
import Typography from '../../views/Theme/Typography/';
import Charts from '../../views/Charts/';
import Widgets from '../../views/Widgets/';
// Base
import Cards from '../../views/Base/Cards/';
import Forms from '../../views/Base/Forms/';
import Switches from '../../views/Base/Switches/';
import Tables from '../../views/Base/Tables/';
import Tabs from '../../views/Base/Tabs/';
import Breadcrumbs from '../../views/Base/Breadcrumbs/';
import Carousels from '../../views/Base/Carousels/';
import Collapses from '../../views/Base/Collapses/';
import Dropdowns from '../../views/Base/Dropdowns/';
import Jumbotrons from '../../views/Base/Jumbotrons/';
import ListGroups from '../../views/Base/ListGroups/';
import Navbars from '../../views/Base/Navbars/';
import Navs from '../../views/Base/Navs/';
import Paginations from '../../views/Base/Paginations/';
import Popovers from '../../views/Base/Popovers/';
import ProgressBar from '../../views/Base/ProgressBar/';
import Tooltips from '../../views/Base/Tooltips/';
// Buttons
import Buttons from '../../views/Buttons/Buttons/';
import ButtonDropdowns from '../../views/Buttons/ButtonDropdowns/';
import ButtonGroups from '../../views/Buttons/ButtonGroups/';
import SocialButtons from '../../views/Buttons/SocialButtons/';
// Icons
import Flags from '../../views/Icons/Flags/';
import FontAwesome from '../../views/Icons/FontAwesome/';
import SimpleLineIcons from '../../views/Icons/SimpleLineIcons/';
// Notifications
import Alerts from '../../views/Notifications/Alerts/';
import Badges from '../../views/Notifications/Badges/';
import Modals from '../../views/Notifications/Modals/';
import {
AppAside,
AppBreadcrumb,
AppFooter,
AppHeader,
AppSidebar,
AppSidebarFooter,
AppSidebarForm,
AppSidebarHeader,
AppSidebarMinimizer,
AppSidebarNav,
} from '@coreui/react-dev';
// sidebar nav config
import navigation from '../../_nav';
// routes config
import routes from '../../routes';
import FullAside from './FullAside';
import FullFooter from './FullFooter';
import FullHeader from './FullHeader';
class Full extends Component {
render() {
return (
<div className="app">
<Header/>
<AppHeader fixed>
<FullHeader />
</AppHeader>
<div className="app-body">
<Sidebar {...this.props}/>
<AppSidebar fixed display="lg">
<AppSidebarHeader />
<AppSidebarForm />
<AppSidebarNav navConfig={navigation} {...this.props} />
<AppSidebarFooter />
<AppSidebarMinimizer />
</AppSidebar>
<main className="main">
<Breadcrumb/>
<AppBreadcrumb appRoutes={routes}>
<li class="breadcrumb-menu d-md-down-none">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a class="btn" href="#"><i class="icon-speech"></i></a>
<a class="btn" href="/dashboard"><i class="icon-graph"></i> &nbsp;Dashboard</a>
<a class="btn" href="#"><i class="icon-settings"></i> &nbsp;Settings</a>
</div>
</li>
</AppBreadcrumb>
<Container fluid>
<Switch>
<Route path="/dashboard" name="Dashboard" component={Dashboard}/>
<Route path="/theme/colors" name="Colors" component={Colors}/>
<Route path="/theme/typography" name="Typography" component={Typography}/>
<Route path="/base/cards" name="Cards" component={Cards}/>
<Route path="/base/forms" name="Forms" component={Forms}/>
<Route path="/base/switches" name="Swithces" component={Switches}/>
<Route path="/base/tables" name="Tables" component={Tables}/>
<Route path="/base/tabs" name="Tabs" component={Tabs}/>
<Route path="/base/breadcrumbs" name="Breadcrumbs" component={Breadcrumbs}/>
<Route path="/base/carousels" name="Carousels" component={Carousels}/>
<Route path="/base/collapses" name="Collapses" component={Collapses}/>
<Route path="/base/dropdowns" name="Dropdowns" component={Dropdowns}/>
<Route path="/base/jumbotrons" name="Jumbotrons" component={Jumbotrons}/>
<Route path="/base/list-groups" name="ListGroups" component={ListGroups}/>
<Route path="/base/navbars" name="Navbars" component={Navbars}/>
<Route path="/base/navs" name="Navs" component={Navs}/>
<Route path="/base/paginations" name="Paginations" component={Paginations}/>
<Route path="/base/popovers" name="Popovers" component={Popovers}/>
<Route path="/base/progress-bar" name="Progress Bar" component={ProgressBar}/>
<Route path="/base/tooltips" name="Tooltips" component={Tooltips}/>
<Route path="/buttons/buttons" name="Buttons" component={Buttons}/>
<Route path="/buttons/button-dropdowns" name="ButtonDropdowns" component={ButtonDropdowns}/>
<Route path="/buttons/button-groups" name="ButtonGroups" component={ButtonGroups}/>
<Route path="/buttons/social-buttons" name="Social Buttons" component={SocialButtons}/>
<Route path="/icons/flags" name="Flags" component={Flags}/>
<Route path="/icons/font-awesome" name="Font Awesome" component={FontAwesome}/>
<Route path="/icons/simple-line-icons" name="Simple Line Icons" component={SimpleLineIcons}/>
<Route path="/notifications/alerts" name="Alerts" component={Alerts}/>
<Route path="/notifications/badges" name="Badges" component={Badges}/>
<Route path="/notifications/modals" name="Modals" component={Modals}/>
<Route path="/widgets" name="Widgets" component={Widgets}/>
<Route path="/charts" name="Charts" component={Charts}/>
<Redirect from="/" to="/dashboard"/>
{routes.map((route, idx) => {
return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
<route.component {...props} />
)} />)
: (null);
},
)}
<Redirect from="/" to="/dashboard" />
</Switch>
</Container>
</main>
<Aside/>
<AppAside fixed hidden display="lg">
<FullAside />
</AppAside>
</div>
<Footer/>
<AppFooter fixed>
<FullFooter />
</AppFooter>
</div>
);
}

130
src/components/Aside/Aside.js → src/containers/Full/FullAside.js
View File

@ -1,44 +1,61 @@
import React, {Component} from 'react';
import {TabContent, TabPane, Nav, NavItem, NavLink, Progress, Label, Input} from 'reactstrap';
import classnames from 'classnames';
import React, { Component } from 'react';
import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane } from 'reactstrap';
import PropTypes from 'prop-types';
import classNames from 'classnames';
const propTypes = {
children: PropTypes.node,
};
const defaultProps = {};
class FullAside extends Component {
class Aside extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
activeTab: '1'
activeTab: '1',
};
}
toggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
activeTab: tab,
});
}
}
render() {
const { children, ...attributes } = this.props;
return (
<aside className="aside-menu">
<React.Fragment>
<Nav tabs>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggle('1'); }}>
<NavLink className={classNames({ active: this.state.activeTab === '1' })}
onClick={() => {
this.toggle('1');
}}>
<i className="icon-list"></i>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '2' })}
onClick={() => { this.toggle('2'); }}>
<NavLink className={classNames({ active: this.state.activeTab === '2' })}
onClick={() => {
this.toggle('2');
}}>
<i className="icon-speech"></i>
</NavLink>
</NavItem>
<NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggle('3'); }}>
<NavLink className={classNames({ active: this.state.activeTab === '3' })}
onClick={() => {
this.toggle('3');
}}>
<i className="icon-settings"></i>
</NavLink>
</NavItem>
@ -48,93 +65,93 @@ class Aside extends Component {
<div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
<small><b>Today</b></small>
</div>
<hr className="transparent mx-3 my-0"/>
<hr className="transparent mx-3 my-0" />
<div className="callout callout-warning m-0 py-3">
<div className="avatar float-right">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>Meeting with <strong>Lucas</strong></div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
</div>
<hr className="mx-3 my-0"/>
<hr className="mx-3 my-0" />
<div className="callout callout-info m-0 py-3">
<div className="avatar float-right">
<img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div>Skype with <strong>Megan</strong></div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 5pm</small>
<small className="text-muted"><i className="icon-social-skype"></i>&nbsp; On-line</small>
</div>
<hr className="transparent mx-3 my-0"/>
<hr className="transparent mx-3 my-0" />
<div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
<small><b>Tomorrow</b></small>
</div>
<hr className="transparent mx-3 my-0"/>
<hr className="transparent mx-3 my-0" />
<div className="callout callout-danger m-0 py-3">
<div>New UI Project - <strong>deadline</strong></div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 10 - 11pm</small>
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
<div className="avatars-stack mt-2">
<div className="avatar avatar-xs">
<img src={'img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
</div>
</div>
<hr className="mx-3 my-0"/>
<hr className="mx-3 my-0" />
<div className="callout callout-success m-0 py-3">
<div><strong>#10 Startups.Garden</strong> Meetup</div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
</div>
<hr className="mx-3 my-0"/>
<hr className="mx-3 my-0" />
<div className="callout callout-primary m-0 py-3">
<div><strong>Team meeting</strong></div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 6pm</small>
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
<div className="avatars-stack mt-2">
<div className="avatar avatar-xs">
<img src={'img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
<div className="avatar avatar-xs">
<img src={'img/avatars/8.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/8.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div>
</div>
</div>
<hr className="mx-3 my-0"/>
<hr className="mx-3 my-0" />
</TabPane>
<TabPane tabId="2" className="p-3">
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span>
</div>
</div>
@ -147,11 +164,11 @@ class Aside extends Component {
tempor incididunt...
</small>
</div>
<hr/>
<hr />
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span>
</div>
</div>
@ -164,11 +181,11 @@ class Aside extends Component {
tempor incididunt...
</small>
</div>
<hr/>
<hr />
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span>
</div>
</div>
@ -181,11 +198,11 @@ class Aside extends Component {
tempor incididunt...
</small>
</div>
<hr/>
<hr />
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span>
</div>
</div>
@ -198,11 +215,11 @@ class Aside extends Component {
tempor incididunt...
</small>
</div>
<hr/>
<hr />
<div className="message">
<div className="py-3 pb-5 mr-3 float-left">
<div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
<img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span>
</div>
</div>
@ -223,7 +240,7 @@ class Aside extends Component {
<div className="clearfix mt-4">
<small><b>Option 1</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -239,7 +256,7 @@ class Aside extends Component {
<div className="clearfix mt-3">
<small><b>Option 2</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
<Input type="checkbox" className="switch-input"/>
<Input type="checkbox" className="switch-input" />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -255,7 +272,7 @@ class Aside extends Component {
<div className="clearfix mt-3">
<small><b>Option 3</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
<Input type="checkbox" className="switch-input"/>
<Input type="checkbox" className="switch-input" />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -266,44 +283,47 @@ class Aside extends Component {
<div className="clearfix mt-3">
<small><b>Option 4</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
</div>
</div>
<hr/>
<hr />
<h6>System Utilization</h6>
<div className="text-uppercase mb-1 mt-4">
<small><b>CPU Usage</b></small>
</div>
<Progress className="progress-xs" color="info" value="25"/>
<Progress className="progress-xs" color="info" value="25" />
<small className="text-muted">348 Processes. 1/4 Cores.</small>
<div className="text-uppercase mb-1 mt-2">
<small><b>Memory Usage</b></small>
</div>
<Progress className="progress-xs" color="warning" value="70"/>
<Progress className="progress-xs" color="warning" value="70" />
<small className="text-muted">11444GB/16384MB</small>
<div className="text-uppercase mb-1 mt-2">
<small><b>SSD 1 Usage</b></small>
</div>
<Progress className="progress-xs" color="danger" value="95"/>
<Progress className="progress-xs" color="danger" value="95" />
<small className="text-muted">243GB/256GB</small>
<div className="text-uppercase mb-1 mt-2">
<small><b>SSD 2 Usage</b></small>
</div>
<Progress className="progress-xs" color="success" value="10"/>
<Progress className="progress-xs" color="success" value="10" />
<small className="text-muted">25GB/256GB</small>
</TabPane>
</TabContent>
</aside>
)
</React.Fragment>
);
}
}
export default Aside;
FullAside.propTypes = propTypes;
FullAside.defaultProps = defaultProps;
export default FullAside;

27
src/containers/Full/FullFooter.js Normal file
View File

@ -0,0 +1,27 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const propTypes = {
children: PropTypes.node,
};
const defaultProps = {};
class FullFooter extends Component {
render() {
const { children, ...attributes } = this.props;
return (
<React.Fragment>
<span><a href="https://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
<span className="ml-auto">Powered by <a href="https://coreui.io/react">CoreUI for React</a></span>
</React.Fragment>
);
}
}
FullFooter.propTypes = propTypes;
FullFooter.defaultProps = defaultProps;
export default FullFooter;

79
src/containers/Full/FullHeader.js Normal file
View File

@ -0,0 +1,79 @@
import React, { Component } from 'react';
import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
import PropTypes from 'prop-types';
import { AppAsideToggler, AppHeaderDropdown, AppNavbarBrand, AppSidebarToggler } from '@coreui/react-dev';
const propTypes = {
children: PropTypes.node,
};
const defaultProps = {};
class FullHeader extends Component {
render() {
const { children, ...attributes } = this.props;
return (
<React.Fragment>
<AppSidebarToggler className="d-lg-none" display="md" mobile />
<AppNavbarBrand
full={{ src: process.env.PUBLIC_URL + 'assets/img/brand/logo.svg', width: 89, height: 25, alt: 'CoreUI Logo' }}
minimized={{ src: process.env.PUBLIC_URL + 'assets/img/brand/sygnet.svg', width: 30, height: 30, alt: 'CoreUI Logo' }}
/>
<AppSidebarToggler className="d-md-down-none" display="lg" />
<Nav className="d-md-down-none" navbar>
<NavItem className="px-3">
<NavLink href="/">Dashboard</NavLink>
</NavItem>
<NavItem className="px-3">
<NavLink href="#">Users</NavLink>
</NavItem>
<NavItem className="px-3">
<NavLink href="#">Settings</NavLink>
</NavItem>
</Nav>
<Nav className="ml-auto" navbar>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
</NavItem>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-list"></i></NavLink>
</NavItem>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
</NavItem>
<AppHeaderDropdown>
<DropdownToggle nav>
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</DropdownToggle>
<DropdownMenu right style={{ right: 'auto' }}>
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
<DropdownItem divider />
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
</DropdownMenu>
</AppHeaderDropdown>
</Nav>
<AppAsideToggler className="d-md-down-none" />
<AppAsideToggler className="d-lg-none" mobile />
</React.Fragment>
);
}
}
FullHeader.propTypes = propTypes;
FullHeader.defaultProps = defaultProps;
export default FullHeader;

3
src/containers/index.js Normal file
View File

@ -0,0 +1,3 @@
import Full from './Full';
export { Full };

1
src/index.css Normal file
View File

@ -0,0 +1 @@

38
src/index.js
View File

@ -1,36 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter, Route, Switch} from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// Styles
// Import Flag Icons Set
import 'flag-icon-css/css/flag-icon.min.css';
// Import Font Awesome Icons Set
import 'font-awesome/css/font-awesome.min.css';
// Import Simple Line Icons Set
import 'simple-line-icons/css/simple-line-icons.css';
// Import Main styles for this application
import '../scss/style.scss'
// Temp fix for reactstrap
import '../scss/core/_dropdown-menu-right.scss'
// Containers
import Full from './containers/Full/'
// Views
import Login from './views/Pages/Login/'
import Register from './views/Pages/Register/'
import Page404 from './views/Pages/Page404/'
import Page500 from './views/Pages/Page500/'
ReactDOM.render((
<HashRouter>
<Switch>
<Route exact path="/login" name="Login Page" component={Login}/>
<Route exact path="/register" name="Register Page" component={Register}/>
<Route exact path="/404" name="Page 404" component={Page404}/>
<Route exact path="/500" name="Page 500" component={Page500}/>
<Route path="/" name="Home" component={Full}/>
</Switch>
</HashRouter>
), document.getElementById('root'));
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

117
src/registerServiceWorker.js Normal file
View File

@ -0,0 +1,117 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://goo.gl/SC7cgQ'
);
});
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl);
}
});
}
}
function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}

119
src/routes.js
View File

@ -1,40 +1,79 @@
const routes = {
'/': 'Home',
'/base': 'Base',
'/base/cards': 'Cards',
'/base/forms': 'Forms',
'/base/switches': 'Switches',
'/base/tables': 'Tables',
'/base/tabs': 'Tabs',
'/base/breadcrumbs': 'Breadcrumbs',
'/base/carousels': 'Carousels',
'/base/collapses': 'Collapses',
'/base/jumbotrons': 'Jumbotrons',
'/base/list-groups': 'List Groups',
'/base/navbars': 'Navbars',
'/base/navs': 'Navs',
'/base/paginations': 'Paginations',
'/base/popovers': 'Popovers',
'/base/progress-bar': 'Progress Bar',
'/base/tooltips': 'Tooltips',
'/buttons': 'Buttons',
'/buttons/buttons': 'Buttons',
'/buttons/social-buttons': 'Social Buttons',
'/buttons/button-dropdowns': 'Button Dropdowns',
'/buttons/button-groups': 'Button Groups',
'/charts': 'Charts',
'/dashboard': 'Dashboard',
'/icons': 'Icons',
'/icons/flags': 'Flags',
'/icons/font-awesome': 'Font Awesome',
'/icons/simple-line-icons': 'Simple Line Icons',
'/notifications': 'Notifications',
'/notifications/alerts': 'Alerts',
'/notifications/badges': 'Badges',
'/notifications/modals': 'Modals',
'/theme': 'Theme',
'/theme/colors': 'Colors',
'/theme/typography': 'Typography',
'/widgets': 'Widgets'
};
export default routes;
import {
Alerts,
Badges,
Breadcrumbs,
ButtonDropdowns,
ButtonGroups,
Buttons,
Cards,
Carousels,
Charts,
Collapses,
Colors,
Dashboard,
Dropdowns,
Flags,
FontAwesome,
Forms,
Jumbotrons,
ListGroups,
Modals,
Navbars,
Navs,
Paginations,
Popovers,
ProgressBar,
SimpleLineIcons,
SocialButtons,
Switches,
Tables,
Tabs,
Tooltips,
Typography,
Widgets,
} from './views';
import Full from './containers/Full';
// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [
{ path: '/', exact: true, name: 'Home', component: Full },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard },
{ path: '/theme', exact: true, name: 'Theme', component: Colors },
{ path: '/theme/colors', name: 'Colors', component: Colors },
{ path: '/theme/typography', name: 'Typography', component: Typography },
{ path: '/base', exact: true, name: 'Base', component: Cards },
{ path: '/base/cards', name: 'Cards', component: Cards },
{ path: '/base/forms', name: 'Forms', component: Forms },
{ path: '/base/switches', name: 'Swithces', component: Switches },
{ path: '/base/tables', name: 'Tables', component: Tables },
{ path: '/base/tabs', name: 'Tabs', component: Tabs },
{ path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
{ path: '/base/carousels', name: 'Carousels', component: Carousels },
{ path: '/base/collapses', name: 'Collapses', component: Collapses },
{ path: '/base/dropdowns', name: 'Dropdowns', component: Dropdowns },
{ path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
{ path: '/base/list-groups', name: 'ListGroups', component: ListGroups },
{ path: '/base/navbars', name: 'Navbars', component: Navbars },
{ path: '/base/navs', name: 'Navs', component: Navs },
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
{ path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
{ path: '/buttons', exact: true, name: 'Buttons', component: Buttons },
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons },
{ path: '/buttons/button-dropdowns', name: 'ButtonDropdowns', component: ButtonDropdowns },
{ path: '/buttons/button-groups', name: 'ButtonGroups', component: ButtonGroups },
{ path: '/buttons/social-buttons', name: 'Social Buttons', component: SocialButtons },
{ path: '/icons', exact: true, name: 'Icons', component: Flags },
{ path: '/icons/flags', name: 'Flags', component: Flags },
{ path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },
{ path: '/icons/simple-line-icons', name: 'Simple Line Icons', component: SimpleLineIcons },
{ path: '/notifications', exact: true, name: 'Notifications', component: Alerts },
{ path: '/notifications/alerts', name: 'Alerts', component: Alerts },
{ path: '/notifications/badges', name: 'Badges', component: Badges },
{ path: '/notifications/modals', name: 'Modals', component: Modals },
{ path: '/widgets', name: 'Widgets', component: Widgets },
{ path: '/charts', name: 'Charts', component: Charts },
];
export default routes;

0
public/scss/_custom.scss → src/scss/_custom.scss
View File

0
public/scss/_variables.scss → src/scss/_variables.scss
View File

9467
src/scss/style.css Normal file
View File

File diff suppressed because it is too large Load Diff

2
public/scss/style.scss → src/scss/style.scss
View File

@ -3,6 +3,8 @@
// Import styles
@import "node_modules/@coreui/styles/scss/coreui";
// Temp fix for reactstrap
@import 'node_modules/@coreui/styles/scss/_dropdown-menu-right.scss';
// If you want to add something do it here
@import "custom";

0
public/scss/vendors/_variables.scss → src/scss/vendors/_variables.scss vendored
View File

42
src/scss/vendors/chart.js/chart.css vendored Normal file
View File

@ -0,0 +1,42 @@
.chart-legend,
.bar-legend,
.line-legend,
.pie-legend,
.radar-legend,
.polararea-legend,
.doughnut-legend {
list-style-type: none;
margin-top: 5px;
text-align: center;
-webkit-padding-start: 0;
-moz-padding-start: 0;
padding-left: 0; }
.chart-legend li,
.bar-legend li,
.line-legend li,
.pie-legend li,
.radar-legend li,
.polararea-legend li,
.doughnut-legend li {
display: inline-block;
white-space: nowrap;
position: relative;
margin-bottom: 4px;
padding: 2px 8px 2px 28px;
font-size: smaller;
cursor: default; }
.chart-legend li span,
.bar-legend li span,
.line-legend li span,
.pie-legend li span,
.radar-legend li span,
.polararea-legend li span,
.doughnut-legend li span {
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px; }

48
src/scss/vendors/chart.js/chart.scss vendored Normal file
View File

@ -0,0 +1,48 @@
// Import variables
@import '../variables';
.chart-legend,
.bar-legend,
.line-legend,
.pie-legend,
.radar-legend,
.polararea-legend,
.doughnut-legend {
list-style-type: none;
margin-top: 5px;
text-align: center;
-webkit-padding-start: 0;
-moz-padding-start: 0;
padding-left: 0;
}
.chart-legend li,
.bar-legend li,
.line-legend li,
.pie-legend li,
.radar-legend li,
.polararea-legend li,
.doughnut-legend li {
display: inline-block;
white-space: nowrap;
position: relative;
margin-bottom: 4px;
@include border-radius($border-radius);
padding: 2px 8px 2px 28px;
font-size: smaller;
cursor: default;
}
.chart-legend li span,
.bar-legend li span,
.line-legend li span,
.pie-legend li span,
.radar-legend li span,
.polararea-legend li span,
.doughnut-legend li span {
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
@include border-radius($border-radius);
}

10
src/views/Base/Breadcrumbs/Breadcrumbs.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, CardFooter, Breadcrumb, BreadcrumbItem } from 'reactstrap';
import React, { Component } from 'react';
import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class Breadcrumbs extends Component {
render() {
@ -10,8 +10,8 @@ class Breadcrumbs extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Breadcrumbs</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/breadcrumbs/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/breadcrumbs/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -40,7 +40,7 @@ class Breadcrumbs extends Component {
</Col>
</Row>
</div>
)
);
}
}

20
src/views/Base/Cards/Cards.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBody, Label, Input} from 'reactstrap';
import React, { Component } from 'react';
import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row } from 'reactstrap';
class Cards extends Component {
render() {
@ -45,7 +45,7 @@ class Cards extends Component {
<CardHeader>
Card with switch
<Label className="switch switch-sm switch-text switch-info float-right mb-0">
<Input type="checkbox" className="switch-input"/>
<Input type="checkbox" className="switch-input" />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -239,7 +239,7 @@ class Cards extends Component {
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
@ -249,7 +249,7 @@ class Cards extends Component {
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
@ -259,7 +259,7 @@ class Cards extends Component {
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
@ -269,7 +269,7 @@ class Cards extends Component {
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
@ -279,7 +279,7 @@ class Cards extends Component {
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
@ -289,7 +289,7 @@ class Cards extends Component {
<CardBody>
<blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</CardBody>
</Card>
@ -359,7 +359,7 @@ class Cards extends Component {
</Row>
</div>
)
);
}
}

56
src/views/Base/Carousels/Carousels.js
View File

@ -1,41 +1,29 @@
import React, {Component} from 'react';
import {
Row,
Col,
Card,
CardHeader,
CardBody,
Carousel,
CarouselItem,
CarouselControl,
CarouselIndicators,
CarouselCaption
} from 'reactstrap';
import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Carousel, CarouselCaption, CarouselControl, CarouselIndicators, CarouselItem, Col, Row } from 'reactstrap';
const items = [
{
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 1',
caption: 'Slide 1'
caption: 'Slide 1',
},
{
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 2',
caption: 'Slide 2'
caption: 'Slide 2',
},
{
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 3',
caption: 'Slide 3'
}
caption: 'Slide 3',
},
];
class Carousels extends Component {
constructor(props) {
super(props);
this.state = {activeIndex: 0};
this.state = { activeIndex: 0 };
this.next = this.next.bind(this);
this.previous = this.previous.bind(this);
this.goToIndex = this.goToIndex.bind(this);
@ -54,31 +42,27 @@ class Carousels extends Component {
next() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
this.setState({activeIndex: nextIndex});
this.setState({ activeIndex: nextIndex });
}
previous() {
if (this.animating) return;
const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
this.setState({activeIndex: nextIndex});
this.setState({ activeIndex: nextIndex });
}
goToIndex(newIndex) {
if (this.animating) return;
this.setState({activeIndex: newIndex});
this.setState({ activeIndex: newIndex });
}
render() {
const {activeIndex} = this.state;
const { activeIndex } = this.state;
const slides = items.map((item) => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.src}
>
<img className="d-block w-100" src={item.src} alt={item.altText}/>
<CarouselItem onExiting={this.onExiting} onExited={this.onExited} key={item.src}>
<img className="d-block w-100" src={item.src} alt={item.altText} />
</CarouselItem>
);
});
@ -90,8 +74,8 @@ class Carousels extends Component {
onExited={this.onExited}
key={item.src}
>
<img className="d-block w-100" src={item.src} alt={item.altText}/>
<CarouselCaption captionText={item.caption} captionHeader={item.caption}/>
<img className="d-block w-100" src={item.src} alt={item.altText} />
<CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>
);
});
@ -103,8 +87,8 @@ class Carousels extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Carousel</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/carousel/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/carousel/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -123,10 +107,10 @@ class Carousels extends Component {
</CardHeader>
<CardBody>
<Carousel activeIndex={activeIndex} next={this.next} previous={this.previous}>
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex}/>
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{slides2}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous}/>
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next}/>
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel>
</CardBody>
</Card>

36
src/views/Base/Collapses/Collapses.js
View File

@ -1,13 +1,5 @@
import React, {Component} from 'react';
import {
Row,
Col,
Card,
CardHeader,
CardBody,
CardFooter,
Collapse, Button, Fade
} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, CardHeader, Collapse, Fade } from 'reactstrap';
class Collapses extends Component {
@ -23,32 +15,32 @@ class Collapses extends Component {
collapse: false,
status: 'Closed',
fadeIn: true,
timeout: 300
timeout: 300,
};
}
onEntering() {
this.setState({status: 'Opening...'});
this.setState({ status: 'Opening...' });
}
onEntered() {
this.setState({status: 'Opened'});
this.setState({ status: 'Opened' });
}
onExiting() {
this.setState({status: 'Closing...'});
this.setState({ status: 'Closing...' });
}
onExited() {
this.setState({status: 'Closed'});
this.setState({ status: 'Closed' });
}
toggle() {
this.setState({collapse: !this.state.collapse});
this.setState({ collapse: !this.state.collapse });
}
toggleFade() {
this.setState({fadeIn: !this.state.fadeIn});
this.setState({ fadeIn: !this.state.fadeIn });
}
render() {
@ -57,8 +49,8 @@ class Collapses extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Collapse</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/collapse/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -91,15 +83,15 @@ class Collapses extends Component {
</CardBody>
</Collapse>
<CardFooter>
<Button color="primary" onClick={this.toggle} style={{marginBottom: '1rem'}}>Toggle</Button>
<Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
<h5>Current state: {this.state.status}</h5>
</CardFooter>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Fade</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/fade/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>

40
src/views/Base/Dropdowns/Dropdowns.js
View File

@ -1,9 +1,5 @@
import React, {Component} from 'react';
import {
Row, Col,
Card, CardHeader, CardBody, CardFooter,
Dropdown, DropdownToggle, DropdownMenu, DropdownItem, UncontrolledDropdown
} from 'reactstrap';
import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row, UncontrolledDropdown } from 'reactstrap';
class Dropdowns extends Component {
constructor(props) {
@ -11,8 +7,8 @@ class Dropdowns extends Component {
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: new Array(6).fill(false)
}
dropdownOpen: new Array(6).fill(false),
};
}
toggle(i) {
@ -20,7 +16,7 @@ class Dropdowns extends Component {
return (index === i ? !element : false);
});
this.setState({
dropdownOpen: newArray
dropdownOpen: newArray,
});
}
@ -32,8 +28,8 @@ class Dropdowns extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/dropdowns/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/dropdowns/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -49,7 +45,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
@ -69,7 +65,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
@ -89,7 +85,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
@ -101,7 +97,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
@ -113,7 +109,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</Dropdown>
@ -124,21 +120,21 @@ class Dropdowns extends Component {
<i className="fa fa-align-justify"></i><strong>Custom Dropdowns</strong>
</CardHeader>
<CardBody>
<Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5)}}>
<Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5);}}>
<DropdownToggle
tag="span"
onClick={() => {this.toggle(5)}}
onClick={() => {this.toggle(5);}}
data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen[5]}
>
Custom Dropdown Content <strong> * </strong>
</DropdownToggle>
<DropdownMenu right>
<div onClick={() => {this.toggle(5)}}>Custom dropdown item 1 </div>
<div onClick={() => {this.toggle(5)}}>Custom dropdown item 2 </div>
<div onClick={() => {this.toggle(5)}}>Custom dropdown item 3 </div>
<div onClick={() => {this.toggle(5);}}>Custom dropdown item 1</div>
<div onClick={() => {this.toggle(5);}}>Custom dropdown item 2</div>
<div onClick={() => {this.toggle(5);}}>Custom dropdown item 3</div>
<hr className="my-0" />
<div onClick={() => {this.toggle(5)}}>Custom dropdown item 4 </div>
<div onClick={() => {this.toggle(5);}}>Custom dropdown item 4</div>
</DropdownMenu>
</Dropdown>
</CardBody>

354
src/views/Base/Forms/Forms.js
View File

@ -1,25 +1,25 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
import {
Row,
Col,
Button,
ButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
Card,
CardHeader,
CardFooter,
CardBody,
CardFooter,
CardHeader,
Col,
Collapse,
DropdownItem,
DropdownMenu,
DropdownToggle,
Form,
FormGroup,
FormText,
Label,
Input,
InputGroup,
InputGroupAddon,
InputGroupText
InputGroupText,
Label,
Row,
} from 'reactstrap';
class Forms extends Component {
@ -49,7 +49,7 @@ class Forms extends Component {
<Col xs="12">
<FormGroup>
<Label htmlFor="name">Name</Label>
<Input type="text" id="name" placeholder="Enter your name" required/>
<Input type="text" id="name" placeholder="Enter your name" required />
</FormGroup>
</Col>
</Row>
@ -57,7 +57,7 @@ class Forms extends Component {
<Col xs="12">
<FormGroup>
<Label htmlFor="ccnumber">Credit Card Number</Label>
<Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required/>
<Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required />
</FormGroup>
</Col>
</Row>
@ -101,7 +101,7 @@ class Forms extends Component {
<Col xs="4">
<FormGroup>
<Label htmlFor="cvv">CVV/CVC</Label>
<Input type="text" id="cvv" placeholder="123" required/>
<Input type="text" id="cvv" placeholder="123" required />
</FormGroup>
</Col>
</Row>
@ -117,33 +117,33 @@ class Forms extends Component {
<CardBody>
<FormGroup>
<Label htmlFor="company">Company</Label>
<Input type="text" id="company" placeholder="Enter your company name"/>
<Input type="text" id="company" placeholder="Enter your company name" />
</FormGroup>
<FormGroup>
<Label htmlFor="vat">VAT</Label>
<Input type="text" id="vat" placeholder="DE1234567890"/>
<Input type="text" id="vat" placeholder="DE1234567890" />
</FormGroup>
<FormGroup>
<Label htmlFor="street">Street</Label>
<Input type="text" id="street" placeholder="Enter street name"/>
<Input type="text" id="street" placeholder="Enter street name" />
</FormGroup>
<FormGroup row>
<Col xs="8">
<FormGroup>
<Label htmlFor="city">City</Label>
<Input type="text" id="city" placeholder="Enter your city"/>
<Input type="text" id="city" placeholder="Enter your city" />
</FormGroup>
</Col>
<Col xs="8">
<FormGroup>
<Label htmlFor="postal-code">Postal Code</Label>
<Input type="text" id="postal-code" placeholder="Postal Code"/>
<Input type="text" id="postal-code" placeholder="Postal Code" />
</FormGroup>
</Col>
</FormGroup>
<FormGroup>
<Label htmlFor="country">Country</Label>
<Input type="text" id="country" placeholder="Country name"/>
<Input type="text" id="country" placeholder="Country name" />
</FormGroup>
</CardBody>
</Card>
@ -170,7 +170,7 @@ class Forms extends Component {
<Label htmlFor="text-input">Text Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="text-input" name="text-input" placeholder="Text"/>
<Input type="text" id="text-input" name="text-input" placeholder="Text" />
<FormText color="muted">This is a help text</FormText>
</Col>
</FormGroup>
@ -179,7 +179,7 @@ class Forms extends Component {
<Label htmlFor="email-input">Email Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="email-input" name="email-input" placeholder="Enter Email"/>
<Input type="email" id="email-input" name="email-input" placeholder="Enter Email" />
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
@ -188,7 +188,7 @@ class Forms extends Component {
<Label htmlFor="password-input">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="password-input" name="password-input" placeholder="Password"/>
<Input type="password" id="password-input" name="password-input" placeholder="Password" />
<FormText className="help-block">Please enter a complex password</FormText>
</Col>
</FormGroup>
@ -197,7 +197,7 @@ class Forms extends Component {
<Label htmlFor="disabled-input">Disabled Input</Label>
</Col>
<Col xs="12" md="9">
<Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled/>
<Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled />
</Col>
</FormGroup>
<FormGroup row>
@ -206,7 +206,7 @@ class Forms extends Component {
</Col>
<Col xs="12" md="9">
<Input type="textarea" name="textarea-input" id="textarea-input" rows="9"
placeholder="Content..."/>
placeholder="Content..." />
</Col>
</FormGroup>
<FormGroup row>
@ -288,15 +288,15 @@ class Forms extends Component {
</Col>
<Col md="9">
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1"/>
<Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1" />
<Label check className="form-check-label" htmlFor="radio1">Option 1</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2"/>
<Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2" />
<Label check className="form-check-label" htmlFor="radio2">Option 2</Label>
</FormGroup>
<FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3"/>
<Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3" />
<Label check className="form-check-label" htmlFor="radio3">Option 3</Label>
</FormGroup>
</Col>
@ -307,15 +307,15 @@ class Forms extends Component {
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1"/>
<Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1" />
<Label className="form-check-label" check htmlFor="inline-radio1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2"/>
<Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2" />
<Label className="form-check-label" check htmlFor="inline-radio2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3"/>
<Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3" />
<Label className="form-check-label" check htmlFor="inline-radio3">Three</Label>
</FormGroup>
</Col>
@ -324,15 +324,15 @@ class Forms extends Component {
<Col md="3"><Label>Checkboxes</Label></Col>
<Col md="9">
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1"/>
<Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1" />
<Label check className="form-check-label" htmlFor="checkbox1">Option 1</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2"/>
<Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2" />
<Label check className="form-check-label" htmlFor="checkbox2">Option 2</Label>
</FormGroup>
<FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3"/>
<Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3" />
<Label check className="form-check-label" htmlFor="checkbox3">Option 3</Label>
</FormGroup>
</Col>
@ -343,15 +343,15 @@ class Forms extends Component {
</Col>
<Col md="9">
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1"/>
<Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1" />
<Label className="form-check-label" check htmlFor="inline-checkbox1">One</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2"/>
<Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2" />
<Label className="form-check-label" check htmlFor="inline-checkbox2">Two</Label>
</FormGroup>
<FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3"/>
<Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3" />
<Label className="form-check-label" check htmlFor="inline-checkbox3">Three</Label>
</FormGroup>
</Col>
@ -361,7 +361,7 @@ class Forms extends Component {
<Label htmlFor="file-input">File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-input" name="file-input"/>
<Input type="file" id="file-input" name="file-input" />
</Col>
</FormGroup>
<FormGroup row>
@ -369,7 +369,7 @@ class Forms extends Component {
<Label htmlFor="file-multiple-input">Multiple File input</Label>
</Col>
<Col xs="12" md="9">
<Input type="file" id="file-multiple-input" name="file-multiple-input" multiple/>
<Input type="file" id="file-multiple-input" name="file-multiple-input" multiple />
</Col>
</FormGroup>
<FormGroup row hidden>
@ -378,7 +378,7 @@ class Forms extends Component {
</Col>
<Col xs="12" md="9">
<Label className="custom-file">
<Input className="custom-file" type="file" id="custom-file-input" name="file-input"/>
<Input className="custom-file" type="file" id="custom-file-input" name="file-input" />
<span className="custom-file-control"></span>
</Label>
</Col>
@ -398,11 +398,11 @@ class Forms extends Component {
<Form action="" method="post" inline>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
<Input type="text" id="exampleInputName2" placeholder="Jane Doe" required/>
<Input type="text" id="exampleInputName2" placeholder="Jane Doe" required />
</FormGroup>
<FormGroup className="pr-1">
<Label htmlFor="exampleInputEmail2" className="pr-1">Email</Label>
<Input type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required/>
<Input type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required />
</FormGroup>
</Form>
</CardBody>
@ -424,7 +424,7 @@ class Forms extends Component {
<Label htmlFor="hf-email">Email</Label>
</Col>
<Col xs="12" md="9">
<Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..."/>
<Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." />
<FormText className="help-block">Please enter your email</FormText>
</Col>
</FormGroup>
@ -433,7 +433,7 @@ class Forms extends Component {
<Label htmlFor="hf-password">Password</Label>
</Col>
<Col xs="12" md="9">
<Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..."/>
<Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." />
<FormText className="help-block">Please enter your password</FormText>
</Col>
</FormGroup>
@ -452,12 +452,12 @@ class Forms extends Component {
<Form action="" method="post">
<FormGroup>
<Label htmlFor="nf-email">Email</Label>
<Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.."/>
<Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." />
<FormText className="help-block">Please enter your email</FormText>
</FormGroup>
<FormGroup>
<Label htmlFor="nf-password">Password</Label>
<Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.."/>
<Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." />
<FormText className="help-block">Please enter your password</FormText>
</FormGroup>
</Form>
@ -475,52 +475,52 @@ class Forms extends Component {
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col sm="3">
<Input type="text" placeholder=".col-sm-3"/>
<Input type="text" placeholder=".col-sm-3" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="4">
<Input type="text" placeholder=".col-sm-4"/>
<Input type="text" placeholder=".col-sm-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="5">
<Input type="text" placeholder=".col-sm-5"/>
<Input type="text" placeholder=".col-sm-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="6">
<Input type="text" placeholder=".col-sm-6"/>
<Input type="text" placeholder=".col-sm-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="7">
<Input type="text" placeholder=".col-sm-7"/>
<Input type="text" placeholder=".col-sm-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="8">
<Input type="text" placeholder=".col-sm-8"/>
<Input type="text" placeholder=".col-sm-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="9">
<Input type="text" placeholder=".col-sm-9"/>
<Input type="text" placeholder=".col-sm-9" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="10">
<Input type="text" placeholder=".col-sm-10"/>
<Input type="text" placeholder=".col-sm-10" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="11">
<Input type="text" placeholder=".col-sm-11"/>
<Input type="text" placeholder=".col-sm-11" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm="12">
<Input type="text" placeholder=".col-sm-12"/>
<Input type="text" placeholder=".col-sm-12" />
</Col>
</FormGroup>
</Form>
@ -539,19 +539,19 @@ class Forms extends Component {
<FormGroup row>
<Label sm="5" size="sm" htmlFor="input-small">Small Input</Label>
<Col sm="6">
<Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm"/>
<Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" htmlFor="input-normal">Normal Input</Label>
<Col sm="6">
<Input type="text" id="input-normal" name="input-normal" placeholder="Normal"/>
<Input type="text" id="input-normal" name="input-normal" placeholder="Normal" />
</Col>
</FormGroup>
<FormGroup row>
<Label sm="5" size="lg" htmlFor="input-large">Large Input</Label>
<Col sm="6">
<Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg"/>
<Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" />
</Col>
</FormGroup>
</Form>
@ -572,11 +572,11 @@ class Forms extends Component {
<CardBody>
<FormGroup>
<Label htmlFor="inputIsValid">Input is valid</Label>
<Input type="text" className="is-valid" id="inputIsValid"/>
<Input type="text" className="is-valid" id="inputIsValid" />
</FormGroup>
<FormGroup>
<Label htmlFor="inputIsInvalid">Input is invalid</Label>
<Input type="text" className="is-invalid" id="inputIsInvalid"/>
<Input type="text" className="is-invalid" id="inputIsInvalid" />
</FormGroup>
</CardBody>
</Card>
@ -590,11 +590,11 @@ class Forms extends Component {
<Form className="was-validated">
<FormGroup>
<Label htmlFor="inputSuccess2i">Non-required input</Label>
<Input type="text" className="form-control-success" id="inputSuccess2i"/>
<Input type="text" className="form-control-success" id="inputSuccess2i" />
</FormGroup>
<FormGroup>
<Label htmlFor="inputWarning2i">Required input</Label>
<Input type="text" className="form-control-warning" id="inputWarning2i" required/>
<Input type="text" className="form-control-warning" id="inputWarning2i" required />
</FormGroup>
</Form>
</CardBody>
@ -617,14 +617,14 @@ class Forms extends Component {
<i className="fa fa-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username"/>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email"/>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email" />
<InputGroupAddon addonType="append">
<InputGroupText>
<i className="fa fa-envelope-o"></i>
@ -641,7 +641,7 @@ class Forms extends Component {
<i className="fa fa-euro"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".."/>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".." />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
@ -669,14 +669,14 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
</InputGroupAddon>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username"/>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email"/>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary">Submit</Button>
</InputGroupAddon>
@ -689,7 +689,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
</InputGroupAddon>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search"/>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search" />
<InputGroupAddon addonType="append">
<Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
</InputGroupAddon>
@ -720,34 +720,34 @@ class Forms extends Component {
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.first ? "show" : ""}>
<DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</InputGroupAddon>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username"/>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
</InputGroup>
</Col>
</FormGroup>
<FormGroup row>
<Col md="12">
<InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email"/>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
<InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.second ? "show" : ""}>
<DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
@ -763,27 +763,27 @@ class Forms extends Component {
toggle={() => { this.setState({ third: !this.state.third }); }}>
{/*<Button id="caret" color="primary">Action</Button>*/}
<DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? "show" : ""}>
<DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</InputGroupAddon>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".."/>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
<InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary">
Dropdown
</DropdownToggle>
<DropdownMenu className={this.state.fourth ? "show" : ""}>
<DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Separated link</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
@ -811,42 +811,42 @@ class Forms extends Component {
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col md="8">
<Input type="text" placeholder=".col-md-8"/>
<Input type="text" placeholder=".col-md-8" />
</Col>
<Col md="4">
<Input type="text" placeholder=".col-md-4"/>
<Input type="text" placeholder=".col-md-4" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="7">
<Input type="text" placeholder=".col-md-7"/>
<Input type="text" placeholder=".col-md-7" />
</Col>
<Col md="5">
<Input type="text" placeholder=".col-md-5"/>
<Input type="text" placeholder=".col-md-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="text" placeholder=".col-md-6"/>
<Input type="text" placeholder=".col-md-6" />
</Col>
<Col md="6">
<Input type="text" placeholder=".col-md-6"/>
<Input type="text" placeholder=".col-md-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="5">
<Input type="text" placeholder=".col-md-5"/>
<Input type="text" placeholder=".col-md-5" />
</Col>
<Col md="7">
<Input type="text" placeholder=".col-md-7"/>
<Input type="text" placeholder=".col-md-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col md="4">
<Input type="text" placeholder=".col-md-4"/>
<Input type="text" placeholder=".col-md-4" />
</Col>
<Col md="8">
<Input type="text" placeholder=".col-md-8"/>
<Input type="text" placeholder=".col-md-8" />
</Col>
</FormGroup>
</Form>
@ -870,42 +870,42 @@ class Forms extends Component {
<Form action="" method="post" className="form-horizontal">
<FormGroup row>
<Col xs="4">
<Input type="text" placeholder=".col-4"/>
<Input type="text" placeholder=".col-4" />
</Col>
<Col xs="8">
<Input type="text" placeholder=".col-8"/>
<Input type="text" placeholder=".col-8" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="5">
<Input type="text" placeholder=".col-5"/>
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="7">
<Input type="text" placeholder=".col-7"/>
<Input type="text" placeholder=".col-7" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="6">
<Input type="text" placeholder=".col-6"/>
<Input type="text" placeholder=".col-6" />
</Col>
<Col xs="6">
<Input type="text" placeholder=".col-6"/>
<Input type="text" placeholder=".col-6" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="7">
<Input type="text" placeholder=".col-5"/>
<Input type="text" placeholder=".col-5" />
</Col>
<Col xs="5">
<Input type="text" placeholder=".col-5"/>
<Input type="text" placeholder=".col-5" />
</Col>
</FormGroup>
<FormGroup row>
<Col xs="8">
<Input type="text" placeholder=".col-8"/>
<Input type="text" placeholder=".col-8" />
</Col>
<Col xs="4">
<Input type="text" placeholder=".col-4"/>
<Input type="text" placeholder=".col-4" />
</Col>
</FormGroup>
</Form>
@ -933,7 +933,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend">
<InputGroupText>Username</InputGroupText>
</InputGroupAddon>
<Input type="text" id="username3" name="username3"/>
<Input type="text" id="username3" name="username3" />
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
@ -944,7 +944,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend">
<InputGroupText>Email</InputGroupText>
</InputGroupAddon>
<Input type="email" id="email3" name="email3"/>
<Input type="email" id="email3" name="email3" />
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
@ -955,7 +955,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend">
<InputGroupText>Password</InputGroupText>
</InputGroupAddon>
<Input type="password" id="password3" name="password3"/>
<Input type="password" id="password3" name="password3" />
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
@ -977,7 +977,7 @@ class Forms extends Component {
<Form action="" method="post">
<FormGroup>
<InputGroup>
<Input type="text" id="username2" name="username2" placeholder="Username"/>
<Input type="text" id="username2" name="username2" placeholder="Username" />
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
@ -985,7 +985,7 @@ class Forms extends Component {
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="email" id="email2" name="email2" placeholder="Email"/>
<Input type="email" id="email2" name="email2" placeholder="Email" />
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
@ -993,7 +993,7 @@ class Forms extends Component {
</FormGroup>
<FormGroup>
<InputGroup>
<Input type="password" id="password2" name="password2" placeholder="Password"/>
<Input type="password" id="password2" name="password2" placeholder="Password" />
<InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
@ -1018,7 +1018,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon>
<Input type="text" id="username" name="username" placeholder="Username"/>
<Input type="text" id="username" name="username" placeholder="Username" />
</InputGroup>
</FormGroup>
<FormGroup>
@ -1026,7 +1026,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon>
<Input type="email" id="email" name="email" placeholder="Email"/>
<Input type="email" id="email" name="email" placeholder="Email" />
</InputGroup>
</FormGroup>
<FormGroup>
@ -1034,7 +1034,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon>
<Input type="password" id="password" name="password" placeholder="Password"/>
<Input type="password" id="password" name="password" placeholder="Password" />
</InputGroup>
</FormGroup>
<FormGroup className="form-actions">
@ -1050,7 +1050,7 @@ class Forms extends Component {
<Card>
<CardHeader>
<i className="fa fa-edit"></i>Form Elements
<div className="card-actions">
<div className="card-header-actions">
<a href="#" className="btn-setting"><i className="icon-settings"></i></a>
<Button className="btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
<a href="#" className="btn-close"><i className="icon-close"></i></a>
@ -1058,80 +1058,80 @@ class Forms extends Component {
</CardHeader>
<Collapse isOpen={this.state.collapse} id="collapseExample">
<CardBody>
<Form className="form-horizontal">
<FormGroup>
<Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input id="prependedInput" size="16" type="text"/>
</InputGroup>
<p className="help-block">Here's some help text</p>
<Form className="form-horizontal">
<FormGroup>
<Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input id="prependedInput" size="16" type="text" />
</InputGroup>
<p className="help-block">Here's some help text</p>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text"/>
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text"/>
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text"/>
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text"/>
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div>
</Form>
</CardBody>
</Form>
</CardBody>
</Collapse>
</Card>
</Col>
</Row>
</div>
)
);
}
}

21
src/views/Base/Jumbotrons/Jumbotrons.js
View File

@ -1,13 +1,5 @@
import React, {Component} from 'react';
import {
Row,
Col,
Card,
CardHeader,
CardBody,
CardFooter,
Jumbotron, Button, Container
} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Card, CardBody, CardHeader, Container, Jumbotron } from 'reactstrap';
class Jumbotrons extends Component {
@ -17,8 +9,8 @@ class Jumbotrons extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/jumbotron/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -28,7 +20,7 @@ class Jumbotrons extends Component {
<h1 className="display-3">Hello, world!</h1>
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra
attention to featured content or information.</p>
<hr className="my-2"/>
<hr className="my-2" />
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
<p className="lead">
<Button color="primary">Learn More</Button>
@ -38,7 +30,8 @@ class Jumbotrons extends Component {
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong><small> fluid</small>
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
<small> fluid</small>
</CardHeader>
<CardBody>
<Jumbotron fluid>

22
src/views/Base/ListGroups/ListGroups.js
View File

@ -1,14 +1,5 @@
import React, {Component} from 'react';
import {
Row,
Col,
Card,
CardHeader,
CardBody,
CardFooter,
ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText,
Badge
} from 'reactstrap';
import React, { Component } from 'react';
import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row } from 'reactstrap';
class ListGroups extends Component {
@ -20,8 +11,8 @@ class ListGroups extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/listgroup/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -47,7 +38,8 @@ class ListGroups extends Component {
<ListGroup>
<ListGroupItem className="justify-content-between">Cras justo odio <Badge className="float-right" pill>14</Badge></ListGroupItem>
<ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge className="float-right" pill>2</Badge></ListGroupItem>
<ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill color="warning">1</Badge></ListGroupItem>
<ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill
color="warning">1</Badge></ListGroupItem>
</ListGroup>
</CardBody>
</Card>
@ -104,7 +96,7 @@ class ListGroups extends Component {
<ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
</ListGroup>
<p/>
<p />
</CardBody>
</Card>
</Col>

34
src/views/Base/Navbars/Navbars.js
View File

@ -1,21 +1,19 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
import {
Row,
Col,
Card,
CardHeader,
CardBody,
CardHeader,
Collapse,
Navbar,
NavbarToggler,
NavbarBrand,
DropdownItem,
DropdownMenu,
DropdownToggle,
Nav,
Navbar,
NavbarBrand,
NavbarToggler,
NavItem,
NavLink,
UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from 'reactstrap';
class Navbars extends Component {
@ -27,19 +25,19 @@ class Navbars extends Component {
this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = {
isOpen: false,
collapsed: true
collapsed: true,
};
}
toggle() {
this.setState({
isOpen: !this.state.isOpen
isOpen: !this.state.isOpen,
});
}
toggleNavbar() {
this.setState({
collapsed: !this.state.collapsed
collapsed: !this.state.collapsed,
});
}
@ -49,8 +47,8 @@ class Navbars extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/navbar/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -58,7 +56,7 @@ class Navbars extends Component {
<CardBody>
<Navbar color="info" light expand="md">
<NavbarBrand href="/">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle}/>
<NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar>
<NavItem>
@ -80,7 +78,7 @@ class Navbars extends Component {
<DropdownItem>
Option 2
</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>
Reset
</DropdownItem>
@ -98,7 +96,7 @@ class Navbars extends Component {
<CardBody>
<Navbar color="success" light>
<NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2"/>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar>
<NavItem>

34
src/views/Base/Navs/Navs.js
View File

@ -1,13 +1,5 @@
import React, {Component} from 'react';
import {
Row,
Col,
Card,
CardHeader,
CardBody,
Nav, NavItem, NavLink,
Dropdown, DropdownToggle, DropdownMenu, DropdownItem
} from 'reactstrap';
import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
class Navs extends Component {
@ -16,7 +8,7 @@ class Navs extends Component {
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: [false, false]
dropdownOpen: [false, false],
};
}
@ -25,7 +17,7 @@ class Navs extends Component {
return (index === i ? !element : false);
});
this.setState({
dropdownOpen: newArray
dropdownOpen: newArray,
});
}
@ -35,8 +27,8 @@ class Navs extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Navs</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/navs/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navs/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -57,10 +49,11 @@ class Navs extends Component {
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<hr/>
<hr />
<p>Link Based</p>
<Nav>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
Link</NavLink>
</Nav>
</CardBody>
</Card>
@ -73,7 +66,7 @@ class Navs extends Component {
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen[0]} toggle={() => {this.toggle(0)}}>
<Dropdown nav isOpen={this.state.dropdownOpen[0]} toggle={() => {this.toggle(0);}}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
@ -106,7 +99,7 @@ class Navs extends Component {
<NavItem>
<NavLink href="#" active>Link</NavLink>
</NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1)}}>
<Dropdown nav isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
<DropdownToggle nav caret>
Dropdown
</DropdownToggle>
@ -150,10 +143,11 @@ class Navs extends Component {
<NavLink disabled href="#">Disabled Link</NavLink>
</NavItem>
</Nav>
<hr/>
<hr />
<p>Link based</p>
<Nav vertical>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
Link</NavLink>
</Nav>
</CardBody>
</Card>

21
src/views/Base/Paginations/Pagnations.js
View File

@ -1,12 +1,5 @@
import React, {Component} from 'react';
import {
Row,
Col,
Card,
CardHeader,
CardBody,
Pagination, PaginationItem, PaginationLink
} from 'reactstrap';
import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
class Paginations extends Component {
@ -16,8 +9,8 @@ class Paginations extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Pagination</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/pagination/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/pagination/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -60,7 +53,8 @@ class Paginations extends Component {
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Pagination</strong><small> disabled and active states</small>
<i className="fa fa-align-justify"></i><strong>Pagination</strong>
<small> disabled and active states</small>
</CardHeader>
<CardBody>
<Pagination>
@ -100,7 +94,8 @@ class Paginations extends Component {
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Pagination</strong><small> sizing</small>
<i className="fa fa-align-justify"></i><strong>Pagination</strong>
<small> sizing</small>
</CardHeader>
<CardBody>
<Pagination size="lg">

35
src/views/Base/Popovers/Popovers.js
View File

@ -1,12 +1,5 @@
import React, {Component} from 'react';
import {
Row,
Col,
Card,
CardHeader,
CardBody,
Button, Popover, PopoverHeader, PopoverBody
} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Card, CardBody, CardHeader, Popover, PopoverBody, PopoverHeader } from 'reactstrap';
class PopoverItem extends Component {
constructor(props) {
@ -14,13 +7,13 @@ class PopoverItem extends Component {
this.toggle = this.toggle.bind(this);
this.state = {
popoverOpen: false
popoverOpen: false,
};
}
toggle() {
this.setState({
popoverOpen: !this.state.popoverOpen
popoverOpen: !this.state.popoverOpen,
});
}
@ -50,27 +43,27 @@ class Popovers extends Component {
popovers: [
{
placement: 'top',
text: 'Top'
text: 'Top',
},
{
placement: 'bottom',
text: 'Bottom'
text: 'Bottom',
},
{
placement: 'left',
text: 'Left'
text: 'Left',
},
{
placement: 'right',
text: 'Right'
}
]
text: 'Right',
},
],
};
}
toggle() {
this.setState({
popoverOpen: !this.state.popoverOpen
popoverOpen: !this.state.popoverOpen,
});
}
@ -80,8 +73,8 @@ class Popovers extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Popovers</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/popovers/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/popovers/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -102,7 +95,7 @@ class Popovers extends Component {
<small> list</small>
</CardHeader>
<CardBody>
{ this.state.popovers.map((popover, i) => {
{this.state.popovers.map((popover, i) => {
return <PopoverItem key={i} item={popover} id={i} />;
})}
</CardBody>

97
src/views/Base/ProgressBar/ProgressBar.js
View File

@ -1,10 +1,5 @@
import React, {Component} from 'react';
import {
Card,
CardHeader,
CardBody,
Progress
} from 'reactstrap';
import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Progress } from 'reactstrap';
class ProgressBar extends Component {
@ -14,30 +9,30 @@ class ProgressBar extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Progress</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/progress/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/progress/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<div className="text-center">0%</div>
<Progress/>
<Progress />
<div className="text-center">25%</div>
<Progress value="25"/>
<Progress value="25" />
<div className="text-center">50%</div>
<Progress value={50}/>
<Progress value={50} />
<div className="text-center">75%</div>
<Progress value={75}/>
<Progress value={75} />
<div className="text-center">100%</div>
<Progress value="100"/>
<Progress value="100" />
<div className="text-center">Multiple bars</div>
<Progress multi>
<Progress bar value="15"/>
<Progress bar color="success" value="30"/>
<Progress bar color="info" value="25"/>
<Progress bar color="warning" value="20"/>
<Progress bar color="danger" value="5"/>
<Progress bar value="15" />
<Progress bar color="success" value="30" />
<Progress bar color="info" value="25" />
<Progress bar color="warning" value="20" />
<Progress bar color="danger" value="5" />
</Progress>
</CardBody>
</Card>
@ -47,11 +42,11 @@ class ProgressBar extends Component {
<small> color variants</small>
</CardHeader>
<CardBody>
<Progress value={2 * 5} className="mb-3"/>
<Progress color="success" value="25" className="mb-3"/>
<Progress color="info" value={50} className="mb-3"/>
<Progress color="warning" value={75} className="mb-3"/>
<Progress color="danger" value="100" className="mb-3"/>
<Progress value={2 * 5} className="mb-3" />
<Progress color="success" value="25" className="mb-3" />
<Progress color="info" value={50} className="mb-3" />
<Progress color="warning" value={75} className="mb-3" />
<Progress color="danger" value="100" className="mb-3" />
</CardBody>
</Card>
<Card>
@ -79,16 +74,16 @@ class ProgressBar extends Component {
<small> striped</small>
</CardHeader>
<CardBody>
<Progress striped value={2 * 5} className="mb-3"/>
<Progress striped color="success" value="25" className="mb-3"/>
<Progress striped color="info" value={50} className="mb-3"/>
<Progress striped color="warning" value={75} className="mb-3"/>
<Progress striped color="danger" value="100" className="mb-3"/>
<Progress striped value={2 * 5} className="mb-3" />
<Progress striped color="success" value="25" className="mb-3" />
<Progress striped color="info" value={50} className="mb-3" />
<Progress striped color="warning" value={75} className="mb-3" />
<Progress striped color="danger" value="100" className="mb-3" />
<Progress multi className="mb-3">
<Progress striped bar value="10"/>
<Progress striped bar color="success" value="30"/>
<Progress striped bar color="warning" value="20"/>
<Progress striped bar color="danger" value="20"/>
<Progress striped bar value="10" />
<Progress striped bar color="success" value="30" />
<Progress striped bar color="warning" value="20" />
<Progress striped bar color="danger" value="20" />
</Progress>
</CardBody>
</Card>
@ -98,16 +93,16 @@ class ProgressBar extends Component {
<small> animated</small>
</CardHeader>
<CardBody>
<Progress animated value={2 * 5} className="mb-3"/>
<Progress animated color="success" value="25" className="mb-3"/>
<Progress animated color="info" value={50} className="mb-3"/>
<Progress animated color="warning" value={75} className="mb-3"/>
<Progress animated color="danger" value="100" className="mb-3"/>
<Progress animated value={2 * 5} className="mb-3" />
<Progress animated color="success" value="25" className="mb-3" />
<Progress animated color="info" value={50} className="mb-3" />
<Progress animated color="warning" value={75} className="mb-3" />
<Progress animated color="danger" value="100" className="mb-3" />
<Progress multi>
<Progress animated bar value="10"/>
<Progress animated bar color="success" value="30"/>
<Progress animated bar color="warning" value="20"/>
<Progress animated bar color="danger" value="20"/>
<Progress animated bar value="10" />
<Progress animated bar color="success" value="30" />
<Progress animated bar color="warning" value="20" />
<Progress animated bar color="danger" value="20" />
</Progress>
</CardBody>
</Card>
@ -119,11 +114,11 @@ class ProgressBar extends Component {
<CardBody>
<div className="text-center">Plain</div>
<Progress multi>
<Progress bar value="15"/>
<Progress bar color="success" value="20"/>
<Progress bar color="info" value="25"/>
<Progress bar color="warning" value="20"/>
<Progress bar color="danger" value="15"/>
<Progress bar value="15" />
<Progress bar color="success" value="20" />
<Progress bar color="info" value="25" />
<Progress bar color="warning" value="20" />
<Progress bar color="danger" value="15" />
</Progress>
<div className="text-center">With Labels</div>
<Progress multi>
@ -147,13 +142,13 @@ class ProgressBar extends Component {
</CardHeader>
<CardBody>
<div className="text-center">1 of 5</div>
<Progress value="1" max="5"/>
<Progress value="1" max="5" />
<div className="text-center">50 of 135</div>
<Progress value={50} max="135"/>
<Progress value={50} max="135" />
<div className="text-center">75 of 111</div>
<Progress value={75} max={111}/>
<Progress value={75} max={111} />
<div className="text-center">463 of 500</div>
<Progress value="463" max={500}/>
<Progress value="463" max={500} />
<div className="text-center">Various (40) of 55</div>
<Progress multi>

243
src/views/Base/Switches/Switches.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react";
import {Row, Col, Card, CardHeader, CardBody, Label, Input, Table} from 'reactstrap';
import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Col, Input, Label, Row, Table } from 'reactstrap';
class Switches extends Component {
render() {
@ -14,37 +14,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -59,37 +59,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-default switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -104,37 +104,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-default switch-pill switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -149,37 +149,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-default switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -194,37 +194,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-default switch-pill switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -239,37 +239,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-default switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -284,37 +284,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-default switch-pill switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -329,37 +329,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-text switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -374,37 +374,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-text switch-pill switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -420,37 +420,37 @@ class Switches extends Component {
<CardBody>
<Label className="switch switch-text switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -466,37 +466,37 @@ class Switches extends Component {
<CardBody>
<Label className="switch switch-text switch-pill switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -511,37 +511,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-text switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -556,37 +556,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-text switch-pill switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span>
</Label>
@ -601,37 +601,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-icon switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf164'} data-off={'\uf165'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf087'} data-off={'\uf088'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf028'} data-off={'\uf026'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
@ -646,37 +646,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-icon switch-pill switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
@ -691,37 +691,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-icon switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
@ -736,37 +736,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-icon switch-pill switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
@ -781,37 +781,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-icon switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
@ -826,37 +826,37 @@ class Switches extends Component {
</CardHeader>
<CardBody>
<Label className="switch switch-icon switch-pill switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
&nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span>
</Label>
@ -885,7 +885,7 @@ class Switches extends Component {
</td>
<td>
<Label className="switch switch-lg switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -900,7 +900,7 @@ class Switches extends Component {
</td>
<td>
<Label className="switch switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -915,7 +915,7 @@ class Switches extends Component {
</td>
<td>
<Label className="switch switch-sm switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -930,7 +930,7 @@ class Switches extends Component {
</td>
<td>
<Label className="switch switch-xs switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/>
<Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span>
<span className="switch-handle"></span>
</Label>
@ -948,8 +948,7 @@ class Switches extends Component {
</Row>
</div>
)
);
}
}

18
src/views/Base/Tables/Tables.js
View File

@ -1,17 +1,5 @@
import React, {Component} from 'react';
import {
Badge,
Row,
Col,
Card,
CardHeader,
CardBody,
Table,
Pagination,
PaginationItem,
PaginationLink
} from 'reactstrap';
import React, { Component } from 'react';
import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink, Row, Table } from 'reactstrap';
class Tables extends Component {
render() {
@ -398,7 +386,7 @@ class Tables extends Component {
</Row>
</div>
)
);
}
}

22
src/views/Base/Tabs/Tabs.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from 'reactstrap';
import React, { Component } from 'react';
import { Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap';
import classnames from 'classnames';
class Tabs extends Component {
@ -9,14 +9,14 @@ class Tabs extends Component {
this.toggle = this.toggle.bind(this);
this.state = {
activeTab: '1'
activeTab: '1',
};
}
toggle(tab) {
if (this.state.activeTab !== tab) {
this.setState({
activeTab: tab
activeTab: tab,
});
}
}
@ -134,7 +134,7 @@ class Tabs extends Component {
className={classnames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggle('1'); }}
>
<i className="icon-calculator"></i> <span className={ this.state.activeTab === '1' ? "" : "d-none"}> Calculator</span>
<i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator</span>
</NavLink>
</NavItem>
<NavItem>
@ -143,7 +143,7 @@ class Tabs extends Component {
onClick={() => { this.toggle('2'); }}
>
<i className="icon-basket-loaded"></i> <span
className={ this.state.activeTab === '2' ? "" : "d-none"}> Shopping cart</span>
className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart</span>
</NavLink>
</NavItem>
<NavItem>
@ -151,7 +151,7 @@ class Tabs extends Component {
className={classnames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggle('3'); }}
>
<i className="icon-pie-chart"></i> <span className={ this.state.activeTab === '3' ? "" : "d-none"}> Charts</span>
<i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
</NavLink>
</NavItem>
</Nav>
@ -186,7 +186,7 @@ class Tabs extends Component {
className={classnames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggle('1'); }}
>
<i className="icon-calculator"></i> <span className={ this.state.activeTab === '1' ? "" : "d-none"}> Calculator </span>{'\u00A0'}<Badge
<i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator </span>{'\u00A0'}<Badge
color="success">New</Badge>
</NavLink>
</NavItem>
@ -196,7 +196,7 @@ class Tabs extends Component {
onClick={() => { this.toggle('2'); }}
>
<i className="icon-basket-loaded"></i> <span
className={ this.state.activeTab === '2' ? "" : "d-none"}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge>
className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge>
</NavLink>
</NavItem>
<NavItem>
@ -204,7 +204,7 @@ class Tabs extends Component {
className={classnames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggle('3'); }}
>
<i className="icon-pie-chart"></i> <span className={ this.state.activeTab === '3' ? "" : "d-none"}> Charts</span>
<i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
</NavLink>
</NavItem>
</Nav>
@ -234,7 +234,7 @@ class Tabs extends Component {
</Col>
</Row>
</div>
)
);
}
}

49
src/views/Base/Tooltips/Tooltips.js
View File

@ -1,11 +1,5 @@
import React, {Component} from 'react';
import {
Card,
CardHeader,
CardBody,
Tooltip, UncontrolledTooltip,
Button
} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Card, CardBody, CardHeader, Tooltip, UncontrolledTooltip } from 'reactstrap';
class TooltipItem extends React.Component {
constructor(props) {
@ -13,13 +7,13 @@ class TooltipItem extends React.Component {
this.toggle = this.toggle.bind(this);
this.state = {
tooltipOpen: false
tooltipOpen: false,
};
}
toggle() {
this.setState({
tooltipOpen: !this.state.tooltipOpen
tooltipOpen: !this.state.tooltipOpen,
});
}
@ -48,21 +42,21 @@ class Tooltips extends Component {
tooltips: [
{
placement: 'top',
text: 'Top'
text: 'Top',
},
{
placement: 'bottom',
text: 'Bottom'
text: 'Bottom',
},
{
placement: 'left',
text: 'Left'
text: 'Left',
},
{
placement: 'right',
text: 'Right'
}
]
text: 'Right',
},
],
};
}
@ -71,53 +65,56 @@ class Tooltips extends Component {
return (index === i ? !element : false);
});
this.setState({
tooltipOpen: newArray
tooltipOpen: newArray,
});
}
render() {
render() {
return (
<div className="animated fadeIn">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltips</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/tooltips/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/tooltips/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
</CardHeader>
<CardBody>
<p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
<Tooltip placement="right" isOpen={this.state.tooltipOpen[0]} target="TooltipExample" toggle={() => {this.toggle(0)}}>
<Tooltip placement="right" isOpen={this.state.tooltipOpen[0]} target="TooltipExample" toggle={() => {this.toggle(0);}}>
Hello world!
</Tooltip>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong><small> disable autohide</small>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> disable autohide</small>
</CardHeader>
<CardBody>
<p>Sometimes you need to allow users to select text within a <a href="#" id="DisabledAutoHideExample">tooltip</a>.</p>
<Tooltip placement="top" isOpen={this.state.tooltipOpen[1]} autohide={false} target="DisabledAutoHideExample" toggle={() => {this.toggle(1)}}>
<Tooltip placement="top" isOpen={this.state.tooltipOpen[1]} autohide={false} target="DisabledAutoHideExample" toggle={() => {this.toggle(1);}}>
Try to select this text!
</Tooltip>
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong><small> list</small>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> list</small>
</CardHeader>
<CardBody>
{ this.state.tooltips.map((tooltip, i) => {
{this.state.tooltips.map((tooltip, i) => {
return <TooltipItem key={i} item={tooltip} id={i} />;
})}
</CardBody>
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong><small> uncontrolled</small>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> uncontrolled</small>
</CardHeader>
<CardBody>
<p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p>

22
src/views/Base/index.js Normal file
View File

@ -0,0 +1,22 @@
import Breadcrumbs from './Breadcrumbs';
import Cards from './Cards';
import Carousels from './Carousels';
import Collapses from './Collapses';
import Dropdowns from './Dropdowns';
import Forms from './Forms';
import Jumbotrons from './Jumbotrons';
import ListGroups from './ListGroups';
import Navbars from './Navbars';
import Navs from './Navs';
import Popovers from './Popovers';
import Paginations from './Paginations';
import ProgressBar from './ProgressBar';
import Switches from './Switches';
import Tables from './Tables';
import Tabs from './Tabs';
import Tooltips from './Tooltips';
export {
Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Forms, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tables, Tabs, Tooltips, Paginations
};

52
src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, CardFooter, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap';
import React, { Component } from 'react';
import { Button, ButtonDropdown, Card, CardBody, CardHeader, Col, DropdownItem, DropdownMenu, DropdownToggle, Row } from 'reactstrap';
class ButtonDropdowns extends Component {
@ -8,14 +8,14 @@ class ButtonDropdowns extends Component {
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: new Array(16).fill(false)
dropdownOpen: new Array(16).fill(false),
};
}
toggle(i) {
const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); });
this.setState({
dropdownOpen: newArray
dropdownOpen: newArray,
});
}
@ -27,8 +27,8 @@ class ButtonDropdowns extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Dropdown</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/button-dropdown/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/button-dropdown/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -61,7 +61,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
@ -73,7 +73,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
@ -85,7 +85,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
@ -97,7 +97,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
@ -109,7 +109,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
@ -121,7 +121,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
@ -134,67 +134,67 @@ class ButtonDropdowns extends Component {
<CardBody>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[7]} toggle={() => { this.toggle(7); }}>
<Button id="caret" color="primary">Primary</Button>
<DropdownToggle caret color="primary"/>
<DropdownToggle caret color="primary" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[8]} toggle={() => { this.toggle(8); }}>
<Button id="caret" color="secondary">Secondary</Button>
<DropdownToggle caret color="secondary"/>
<DropdownToggle caret color="secondary" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[9]} toggle={() => { this.toggle(9); }}>
<Button id="caret" color="success">Success</Button>
<DropdownToggle caret color="success"/>
<DropdownToggle caret color="success" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[10]} toggle={() => { this.toggle(10); }}>
<Button id="caret" color="info">Info</Button>
<DropdownToggle caret color="info"/>
<DropdownToggle caret color="info" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[11]} toggle={() => { this.toggle(11); }}>
<Button id="caret" color="warning">Warning</Button>
<DropdownToggle caret color="warning"/>
<DropdownToggle caret color="warning" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[12]} toggle={() => { this.toggle(12); }}>
<Button id="caret" color="danger">Danger</Button>
<DropdownToggle caret color="danger"/>
<DropdownToggle caret color="danger" />
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem divider/>
<DropdownItem divider />
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
@ -235,7 +235,7 @@ class ButtonDropdowns extends Component {
</CardHeader>
<CardBody>
<ButtonDropdown dropup className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
<DropdownToggle caret caret size="lg">
<DropdownToggle caret size="lg">
Dropup
</DropdownToggle>
<DropdownMenu>
@ -250,7 +250,7 @@ class ButtonDropdowns extends Component {
</Col>
</Row>
</div>
)
);
}
}

38
src/views/Buttons/ButtonGroups/ButtonGroups.js
View File

@ -1,5 +1,22 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, ButtonGroup, ButtonToolbar, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap';
import React, { Component } from 'react';
import {
Button,
ButtonDropdown,
ButtonGroup,
ButtonToolbar,
Card,
CardBody,
CardHeader,
Col,
DropdownItem,
DropdownMenu,
DropdownToggle,
Input,
InputGroup,
InputGroupAddon,
InputGroupText,
Row,
} from 'reactstrap';
class ButtonGroups extends Component {
@ -8,14 +25,14 @@ class ButtonGroups extends Component {
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: new Array(2).fill(false)
dropdownOpen: new Array(2).fill(false),
};
}
toggle(i) {
const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); });
this.setState({
dropdownOpen: newArray
dropdownOpen: newArray,
});
}
@ -27,8 +44,8 @@ class ButtonGroups extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Group</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/button-group/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/button-group/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -66,7 +83,8 @@ class ButtonGroups extends Component {
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong> <small>mix with input groups</small>
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
<small>mix with input groups</small>
</CardHeader>
<CardBody>
<ButtonToolbar className="mb-3">
@ -105,13 +123,13 @@ class ButtonGroups extends Component {
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<hr/>
<hr />
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
<hr/>
<hr />
<ButtonGroup size="sm">
<Button>Left</Button>
<Button>Middle</Button>
@ -162,7 +180,7 @@ class ButtonGroups extends Component {
</Col>
</Row>
</div>
)
);
}
}

6
src/views/Buttons/Buttons/Buttons.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class Buttons extends Component {
render() {
@ -207,7 +207,7 @@ class Buttons extends Component {
</Col>
</Row>
</div>
)
);
}
}

12
src/views/Buttons/SocialButtons/SocialButtons.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class SocialButtons extends Component {
render() {
@ -11,7 +11,7 @@ class SocialButtons extends Component {
<CardHeader>
<strong>Social Media Button</strong>
<small>Usage ex.</small>
<code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook"&gt;&lt;span&gt;
<code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader>
<CardBody>
@ -112,7 +112,7 @@ class SocialButtons extends Component {
<CardHeader>
<strong>Social Media Button</strong>
<small>Only icons. Usage ex.</small>
<code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook icon"&gt;&lt;span&gt;
<code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook icon"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader>
<CardBody>
@ -213,7 +213,7 @@ class SocialButtons extends Component {
<CardHeader>
<strong>Social Media Button</strong>
<small>Only text. Usage ex.</small>
<code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook text"&gt;&lt;span&gt;
<code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook text"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader>
<CardBody>
@ -311,7 +311,7 @@ class SocialButtons extends Component {
</Row>
</div>
)
);
}
}

8
src/views/Buttons/index.js Normal file
View File

@ -0,0 +1,8 @@
import ButtonDropdowns from './ButtonDropdowns';
import ButtonGroups from './ButtonGroups';
import Buttons from './Buttons';
import SocialButtons from './SocialButtons';
export {
ButtonDropdowns, ButtonGroups, Buttons, SocialButtons
}

157
src/views/Charts/Charts.js
View File

@ -1,6 +1,6 @@
import React, {Component} from 'react';
import {Bar, Doughnut, Line, Pie, Polar, Radar} from 'react-chartjs-2';
import {CardColumns, Card, CardHeader, CardBody} from 'reactstrap';
import React, { Component } from 'react';
import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2';
import { Card, CardBody, CardColumns, CardHeader } from 'reactstrap';
const line = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@ -24,9 +24,9 @@ const line = {
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40]
}
]
data: [65, 59, 80, 81, 56, 55, 40],
},
],
};
const bar = {
@ -39,30 +39,31 @@ const bar = {
borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40]
}
]
data: [65, 59, 80, 81, 56, 55, 40],
},
],
};
const doughnut = {
labels: [
'Red',
'Green',
'Yellow'
'Yellow',
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}]
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
],
}],
};
const radar = {
@ -76,7 +77,7 @@ const radar = {
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40]
data: [65, 59, 90, 81, 56, 55, 40],
},
{
label: 'My Second dataset',
@ -86,57 +87,59 @@ const radar = {
pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100]
}
]
data: [28, 48, 40, 19, 96, 27, 100],
},
],
};
const pie = {
labels: [
'Red',
'Green',
'Yellow'
'Yellow',
],
datasets: [{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56'
]
}]
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
],
}],
};
const polar = {
datasets: [{
data: [
11,
16,
7,
3,
14
],
backgroundColor: [
'#FF6384',
'#4BC0C0',
'#FFCE56',
'#E7E9ED',
'#36A2EB'
],
label: 'My dataset' // for legend
}],
datasets: [
{
data: [
11,
16,
7,
3,
14,
],
backgroundColor: [
'#FF6384',
'#4BC0C0',
'#FFCE56',
'#E7E9ED',
'#36A2EB',
],
label: 'My dataset' // for legend
}],
labels: [
'Red',
'Green',
'Yellow',
'Grey',
'Blue'
]
'Blue',
],
};
class Charts extends Component {
@ -147,7 +150,7 @@ class Charts extends Component {
<Card>
<CardHeader>
Line Chart
<div className="card-actions">
<div className="card-header-actions">
<a href="http://www.chartjs.org">
<small className="text-muted">docs</small>
</a>
@ -155,18 +158,14 @@ class Charts extends Component {
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Line data={line}
options={{
maintainAspectRatio: false
}}
/>
<Line data={line} options={{ maintainAspectRatio: false, }} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Bar Chart
<div className="card-actions">
<div className="card-header-actions">
<a href="http://www.chartjs.org">
<small className="text-muted">docs</small>
</a>
@ -174,18 +173,14 @@ class Charts extends Component {
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Bar data={bar}
options={{
maintainAspectRatio: false
}}
/>
<Bar data={bar} options={{ maintainAspectRatio: false, }} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Doughnut Chart
<div className="card-actions">
<div className="card-header-actions">
<a href="http://www.chartjs.org">
<small className="text-muted">docs</small>
</a>
@ -193,14 +188,14 @@ class Charts extends Component {
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Doughnut data={doughnut}/>
<Doughnut data={doughnut} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Radar Chart
<div className="card-actions">
<div className="card-header-actions">
<a href="http://www.chartjs.org">
<small className="text-muted">docs</small>
</a>
@ -208,14 +203,14 @@ class Charts extends Component {
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Radar data={radar}/>
<Radar data={radar} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Pie Chart
<div className="card-actions">
<div className="card-header-actions">
<a href="http://www.chartjs.org">
<small className="text-muted">docs</small>
</a>
@ -223,14 +218,14 @@ class Charts extends Component {
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Pie data={pie}/>
<Pie data={pie} />
</div>
</CardBody>
</Card>
<Card>
<CardHeader>
Polar Area Chart
<div className="card-actions">
<div className="card-header-actions">
<a href="http://www.chartjs.org">
<small className="text-muted">docs</small>
</a>
@ -238,13 +233,13 @@ class Charts extends Component {
</CardHeader>
<CardBody>
<div className="chart-wrapper">
<Polar data={polar}/>
<Polar data={polar} />
</div>
</CardBody>
</Card>
</CardColumns>
</div>
)
);
}
}

1057
src/views/Dashboard/Dashboard.js
View File

File diff suppressed because it is too large Load Diff

10
src/views/Icons/Flags/Flags.js
View File

@ -1,6 +1,5 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class Flags extends Component {
render() {
@ -13,7 +12,8 @@ class Flags extends Component {
<CardBody>
<Row className="text-center">
<Col className="mb-5 text-left" xs="12">
For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2
code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
</Col>
<Col className="mb-5" xs="3" sm="2">
<i className="flag-icon flag-icon-ad h1" title="ad" id="ad"></i>
@ -1015,7 +1015,7 @@ class Flags extends Component {
</CardBody>
</Card>
</div>
)
);
}
}

1775
src/views/Icons/FontAwesome/FontAwesome.js
View File

File diff suppressed because it is too large Load Diff

6
src/views/Icons/SimpleLineIcons/SimpleLineIcons.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
import React, { Component } from 'react';
import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class SimpleLineIcons extends Component {
render() {
@ -748,7 +748,7 @@ class SimpleLineIcons extends Component {
</CardBody>
</Card>
</div>
)
);
}
}

7
src/views/Icons/index.js Normal file
View File

@ -0,0 +1,7 @@
import Flags from './Flags';
import FontAwesome from './FontAwesome';
import SimpleLineIcons from './SimpleLineIcons';
export {
Flags, FontAwesome, SimpleLineIcons
};

21
src/views/Notifications/Alerts/Alerts.js
View File

@ -1,12 +1,12 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, Alert} from 'reactstrap';
import React, { Component } from 'react';
import { Alert, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class Alerts extends Component {
constructor(props) {
super(props);
this.state = {
visible: true
visible: true,
};
this.onDismiss = this.onDismiss.bind(this);
@ -24,8 +24,8 @@ class Alerts extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/alerts/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/alerts/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -61,7 +61,8 @@ class Alerts extends Component {
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong><small> use <code>.alert-link</code> to provide links</small>
<i className="fa fa-align-justify"></i><strong>Alerts</strong>
<small> use <code>.alert-link</code> to provide links</small>
</CardHeader>
<CardBody>
<Alert color="primary">
@ -96,7 +97,8 @@ class Alerts extends Component {
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong> <small>additional content</small>
<i className="fa fa-align-justify"></i><strong>Alerts</strong>
<small>additional content</small>
</CardHeader>
<CardBody>
<Alert color="success">
@ -117,7 +119,8 @@ class Alerts extends Component {
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong> <small>dismissing</small>
<i className="fa fa-align-justify"></i><strong>Alerts</strong>
<small>dismissing</small>
</CardHeader>
<CardBody>
<Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
@ -128,7 +131,7 @@ class Alerts extends Component {
</Col>
</Row>
</div>
)
);
}
}

21
src/views/Notifications/Badges/Badges.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Row, Col, Card, CardHeader, CardBody, CardFooter, Badge, Button} from 'reactstrap';
import React, { Component } from 'react';
import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Row } from 'reactstrap';
class Badges extends Component {
render() {
@ -10,8 +10,8 @@ class Badges extends Component {
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong>
<div className="card-actions">
<a href="https://reactstrap.github.io/components/badge/" target="_blank">
<div className="card-header-actions">
<a href="https://reactstrap.github.io/components/badge/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small>
</a>
</div>
@ -26,7 +26,7 @@ class Badges extends Component {
</CardBody>
<CardFooter>
<Button color="primary" outline>
Notifications <Badge color="secondary" style={{position: 'static'}}>4</Badge>
Notifications <Badge color="secondary" style={{ position: 'static' }}>4</Badge>
</Button>
</CardFooter>
</Card>
@ -34,7 +34,8 @@ class Badges extends Component {
<Col xs="12" md="6">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>contextual variations</small>
<i className="fa fa-align-justify"></i><strong>Badges</strong>
<small>contextual variations</small>
</CardHeader>
<CardBody>
<Badge className="mr-1" color="primary">Primary</Badge>
@ -49,7 +50,8 @@ class Badges extends Component {
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>pill badges</small>
<i className="fa fa-align-justify"></i><strong>Badges</strong>
<small>pill badges</small>
</CardHeader>
<CardBody>
<Badge className="mr-1" color="primary" pill>Primary</Badge>
@ -64,7 +66,8 @@ class Badges extends Component {
</Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>links</small>
<i className="fa fa-align-justify"></i><strong>Badges</strong>
<small>links</small>
</CardHeader>
<CardBody>
<Badge className="mr-1" href="#" color="primary">Primary</Badge>
@ -80,7 +83,7 @@ class Badges extends Component {
</Col>
</Row>
</div>
)
);
}
}

27
src/views/Notifications/Modals/Modals.js
View File

@ -1,6 +1,5 @@
import React, {Component} from 'react';
import {Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Card, CardBody, CardHeader, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
class Modals extends Component {
@ -14,7 +13,7 @@ class Modals extends Component {
success: false,
warning: false,
danger: false,
info: false
info: false,
};
this.toggle = this.toggle.bind(this);
@ -29,49 +28,49 @@ class Modals extends Component {
toggle() {
this.setState({
modal: !this.state.modal
modal: !this.state.modal,
});
}
toggleLarge() {
this.setState({
large: !this.state.large
large: !this.state.large,
});
}
toggleSmall() {
this.setState({
small: !this.state.small
small: !this.state.small,
});
}
togglePrimary() {
this.setState({
primary: !this.state.primary
primary: !this.state.primary,
});
}
toggleSuccess() {
this.setState({
success: !this.state.success
success: !this.state.success,
});
}
toggleWarning() {
this.setState({
warning: !this.state.warning
warning: !this.state.warning,
});
}
toggleDanger() {
this.setState({
danger: !this.state.danger
danger: !this.state.danger,
});
}
toggleInfo() {
this.setState({
info: !this.state.info
info: !this.state.info,
});
}
@ -135,7 +134,7 @@ class Modals extends Component {
</ModalFooter>
</Modal>
<hr/>
<hr />
<Button color="primary" onClick={this.togglePrimary}>Primary modal</Button>
<Modal isOpen={this.state.primary} toggle={this.togglePrimary}
@ -227,7 +226,7 @@ class Modals extends Component {
</Col>
</Row>
</div>
)
);
}
}

7
src/views/Notifications/index.js Normal file
View File

@ -0,0 +1,7 @@
import Alerts from './Alerts';
import Badges from './Badges';
import Modals from './Modals';
export {
Alerts, Badges, Modals
};

9
src/views/Pages/Login/Login.js
View File

@ -1,6 +1,5 @@
import React, {Component} from 'react';
import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Login extends Component {
render() {
@ -20,7 +19,7 @@ class Login extends Component {
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Username"/>
<Input type="text" placeholder="Username" />
</InputGroup>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
@ -28,7 +27,7 @@ class Login extends Component {
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Password"/>
<Input type="password" placeholder="Password" />
</InputGroup>
<Row>
<Col xs="6">

6
src/views/Pages/Page404/Page404.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupText} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Page404 extends Component {
render() {
@ -19,7 +19,7 @@ class Page404 extends Component {
<i className="fa fa-search"></i>
</InputGroupText>
</InputGroupAddon>
<Input size="16" type="text" placeholder="What are you looking for?"/>
<Input size="16" type="text" placeholder="What are you looking for?" />
<InputGroupAddon addonType="append">
<Button color="info">Search</Button>
</InputGroupAddon>

4
src/views/Pages/Page500/Page500.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Page500 extends Component {
render() {

12
src/views/Pages/Register/Register.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap';
import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Register extends Component {
render() {
@ -18,13 +18,13 @@ class Register extends Component {
<i className="icon-user"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Username"/>
<Input type="text" placeholder="Username" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText>
</InputGroupAddon>
<Input type="text" placeholder="Email"/>
<Input type="text" placeholder="Email" />
</InputGroup>
<InputGroup className="mb-3">
<InputGroupAddon addonType="prepend">
@ -32,7 +32,7 @@ class Register extends Component {
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Password"/>
<Input type="password" placeholder="Password" />
</InputGroup>
<InputGroup className="mb-4">
<InputGroupAddon addonType="prepend">
@ -40,7 +40,7 @@ class Register extends Component {
<i className="icon-lock"></i>
</InputGroupText>
</InputGroupAddon>
<Input type="password" placeholder="Repeat password"/>
<Input type="password" placeholder="Repeat password" />
</InputGroup>
<Button color="success" block>Create Account</Button>
</CardBody>

8
src/views/Pages/index.js Normal file
View File

@ -0,0 +1,8 @@
import Login from './Login';
import Page404 from './Page404';
import Page500 from './Page500';
import Register from './Register';
export {
Login, Page404, Page500, Register
};

4
src/views/Theme/Colors/Colors.js
View File

@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
class Colors extends Component {
render() {
@ -97,7 +97,7 @@ class Colors extends Component {
</div>
</div>
</div>
)
);
}
}

132
src/views/Theme/Typography/Typography.js
View File

@ -1,4 +1,4 @@
import React, {Component} from 'react';
import React, { Component } from 'react';
class Typography extends Component {
render() {
@ -12,48 +12,48 @@ class Typography extends Component {
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
<table className="table">
<thead>
<tr>
<th>Heading</th>
<th>Example</th>
</tr>
<tr>
<th>Heading</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
</td>
<td><span className="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
</td>
<td><span className="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
</td>
<td><span className="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
</td>
<td><span className="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
</td>
<td><span className="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
</td>
<td><span className="h6">h6. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
</td>
<td><span className="h1">h1. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
</td>
<td><span className="h2">h2. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
</td>
<td><span className="h3">h3. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
</td>
<td><span className="h4">h4. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
</td>
<td><span className="h5">h5. Bootstrap heading</span></td>
</tr>
<tr>
<td>
<p><code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
</td>
<td><span className="h6">h6. Bootstrap heading</span></td>
</tr>
</tbody>
</table>
</div>
@ -63,7 +63,8 @@ class Typography extends Component {
Headings
</div>
<div className="card-body">
<p><code className="highlighter-rouge">.h1</code> through <code className="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p>
<p><code className="highlighter-rouge">.h1</code> through <code className="highlighter-rouge">.h6</code> classes are also available, for when you
want to match the font styling of a heading but cannot use the associated HTML element.</p>
<div className="bd-example">
<p className="h1">h1. Bootstrap heading</p>
<p className="h2">h2. Bootstrap heading</p>
@ -79,22 +80,23 @@ class Typography extends Component {
Display headings
</div>
<div className="card-body">
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<div className="bd-example bd-example-type">
<table className="table">
<tbody>
<tr>
<td><span className="display-1">Display 1</span></td>
</tr>
<tr>
<td><span className="display-2">Display 2</span></td>
</tr>
<tr>
<td><span className="display-3">Display 3</span></td>
</tr>
<tr>
<td><span className="display-4">Display 4</span></td>
</tr>
<tr>
<td><span className="display-1">Display 1</span></td>
</tr>
<tr>
<td><span className="display-2">Display 2</span></td>
</tr>
<tr>
<td><span className="display-3">Display 3</span></td>
</tr>
<tr>
<td><span className="display-4">Display 4</span></td>
</tr>
</tbody>
</table>
</div>
@ -105,14 +107,21 @@ class Typography extends Component {
Inline text elements
</div>
<div className="card-body">
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<div className="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p>
<del>This line of text is meant to be treated as deleted text.</del>
</p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
@ -123,7 +132,8 @@ class Typography extends Component {
Description list alignment
</div>
<div className="card-body">
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can
optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
<div className="bd-example">
<dl className="row">
<dt className="col-sm-3">Description lists</dt>
@ -153,7 +163,7 @@ class Typography extends Component {
</div>
</div>
</div>
)
);
}
}

6
src/views/Theme/index.js Normal file
View File

@ -0,0 +1,6 @@
import Colors from './Colors';
import Typography from './Typography';
export {
Colors, Typography,
};

Some files were not shown because too many files have changed in this diff Show More