diff options
Diffstat (limited to 'src/shared')
| -rw-r--r-- | src/shared/footer.css | 13 | ||||
| -rw-r--r-- | src/shared/footer.hoc.js | 35 | ||||
| -rw-r--r-- | src/shared/header.hoc.js | 0 | ||||
| -rw-r--r-- | src/shared/header_footer.hoc.js | 39 | ||||
| -rw-r--r-- | src/shared/loader.css | 48 | ||||
| -rw-r--r-- | src/shared/loader.hoc.js | 16 | ||||
| -rw-r--r-- | src/shared/sidebar.css | 6 | ||||
| -rw-r--r-- | src/shared/sidebar.hoc.js | 36 |
8 files changed, 193 insertions, 0 deletions
diff --git a/src/shared/footer.css b/src/shared/footer.css new file mode 100644 index 0000000..048b0c6 --- /dev/null +++ b/src/shared/footer.css @@ -0,0 +1,13 @@ +.footer { + position: absolute; + bottom: 0; + width: 95%; + height: 60px; + line-height: 60px; + background-color: #f5f5f5; +} + +.footer>.container { + padding-right: 15px; + padding-left: 15px; +}
\ No newline at end of file diff --git a/src/shared/footer.hoc.js b/src/shared/footer.hoc.js new file mode 100644 index 0000000..535a52d --- /dev/null +++ b/src/shared/footer.hoc.js @@ -0,0 +1,35 @@ +import React, { Component } from "react"; +import { Link } from 'react-router-dom'; +import { connect } from "react-redux"; +import { compose } from "redux"; +import './footer.css'; + +const Footer = (HocComponent) => { + return class FooterComponent extends Component { + + render() { + return ( + <React.Fragment> + <HocComponent {...this.props} /> + <footer className="footer"> + <div className="container">Footer</div> + </footer> + + </React.Fragment> + ); + } + } +} + + +const mapStateToProps = state => { + return { + + }; +}; + +const WithFooter = compose( + connect(mapStateToProps, null), + Footer +) +export default WithFooter;
\ No newline at end of file diff --git a/src/shared/header.hoc.js b/src/shared/header.hoc.js deleted file mode 100644 index e69de29..0000000 --- a/src/shared/header.hoc.js +++ /dev/null diff --git a/src/shared/header_footer.hoc.js b/src/shared/header_footer.hoc.js new file mode 100644 index 0000000..0c093a6 --- /dev/null +++ b/src/shared/header_footer.hoc.js @@ -0,0 +1,39 @@ +import React, { Component } from "react"; +import { Link } from 'react-router-dom'; +import { connect } from "react-redux"; +import { compose } from "redux"; + +const HeaderFooter = (HocComponent) => { + return class HeaderFooterComponent extends Component { + + render() { + return ( + <React.Fragment> + <nav className="nav"> + <Link className="nav-link" to={"/dashboard"} >Dashboard</Link> + <Link className="nav-link" to={"/superadmin"} >Superadmin</Link> + <Link className="nav-link" to={"/admin"} >Admin</Link> + <Link className="nav-link" to={"/login"} >Login</Link> + </nav> + <HocComponent {...this.props} /> + <footer className="footer"> + <div className="container">Footer</div> + </footer> + </React.Fragment> + ); + } + } +} + + +const mapStateToProps = state => { + return { + + }; +}; + +const WithHeaderFooter = compose( + connect(mapStateToProps, null), + HeaderFooter +) +export default WithHeaderFooter;
\ No newline at end of file diff --git a/src/shared/loader.css b/src/shared/loader.css new file mode 100644 index 0000000..2ee47a2 --- /dev/null +++ b/src/shared/loader.css @@ -0,0 +1,48 @@ +.loader { + position: absolute; + z-index: 6; + top: 0px; + left: 0; + height: 4px; + width: 100%; + overflow: hidden; + background-color: #ddd; + } + + .loader:before { + display: block; + position: absolute; + content: ""; + left: -200px; + width: 200px; + height: 4px; + background-color: #ff8373; + animation: loading 2s linear infinite; + } + + @keyframes loading { + from { + left: -200px; + width: 30%; + } + + 50% { + width: 30%; + } + + 70% { + width: 70%; + } + + 80% { + left: 50%; + } + + 95% { + left: 120%; + } + + to { + left: 100%; + } + }
\ No newline at end of file diff --git a/src/shared/loader.hoc.js b/src/shared/loader.hoc.js new file mode 100644 index 0000000..c60089e --- /dev/null +++ b/src/shared/loader.hoc.js @@ -0,0 +1,16 @@ +import React from 'react'; +import "./loader.css"; +const WithLoader = HocComponent => { + return function ({ ...props }) { + return ( + <div className="loader-container"> + {props.isLoading && ( + <div className="loader"></div> + )} + <HocComponent {...props} /> + </div> + ); + }; +}; + +export default WithLoader;
\ No newline at end of file diff --git a/src/shared/sidebar.css b/src/shared/sidebar.css new file mode 100644 index 0000000..cfb3e02 --- /dev/null +++ b/src/shared/sidebar.css @@ -0,0 +1,6 @@ +.sidebar{ + background: #cccc; + width: 92px; + height: calc(100vh); + position: absolute; +}
\ No newline at end of file diff --git a/src/shared/sidebar.hoc.js b/src/shared/sidebar.hoc.js new file mode 100644 index 0000000..30a18a3 --- /dev/null +++ b/src/shared/sidebar.hoc.js @@ -0,0 +1,36 @@ +import React, { Component } from "react"; +import { Link } from 'react-router-dom'; +import { connect } from "react-redux"; +import { compose } from "redux"; +import './sidebar.css'; + +const Sidebar = (HocComponent) => { + return class SidebarComponent extends Component { + + render() { + return ( + <React.Fragment> + <div className="sidebar"> + Sidebar + </div> + <div className="content"> + <HocComponent {...this.props} /> + </div> + </React.Fragment> + ); + } + } +} + + +const mapStateToProps = state => { + return { + + }; +}; + +const WithSidebar = compose( + connect(mapStateToProps, null), + Sidebar +) +export default WithSidebar;
\ No newline at end of file |