Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
app/routes/Layouts/NavbarOnly/NavbarOnly.js Executable file
View File

@@ -0,0 +1,123 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { withPageConfig } from
'./../../../components/Layout/withPageConfig';
import {
Container,
} from './../../../components';
class NavbarOnly extends React.Component {
static propTypes = {
pageConfig: PropTypes.object
};
componentDidMount() {
const { pageConfig } = this.props;
pageConfig.setElementsVisibility({
sidebarHidden: true
});
}
componentWillUnmount() {
const { pageConfig } = this.props;
pageConfig.setElementsVisibility({
sidebarHidden: false
});
}
render() {
return (
<Container>
<p className="mb-5 mt-3">
Welcome to the <b>&quot;Airframe&quot;</b> Admin Dashboard Theme based on <a href="https://getbootstrap.com" className="text-primary" target="_blank" rel="noopener noreferrer">Bootstrap 4.x</a> version for React called&nbsp;
<a href="https://reactstrap.github.io" className="text-primary" target="_blank" rel="noopener noreferrer">reactstrap</a> - easy to use React Bootstrap 4 components compatible with React 16+.
</p>
<section className="mb-5">
<h6>
Layouts for this framework:
</h6>
<ul className="pl-3">
<li>
<Link to="/layouts/navbar" className="text-primary">Navbar</Link>
</li>
<li>
<Link to="/layouts/sidebar" className="text-primary">Sidebar</Link>
</li>
<li>
<Link to="/layouts/sidebar-with-navbar" className="text-primary">Sidebar with Navbar</Link>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
This Starter has:
</h6>
<ul className="pl-3">
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/documentation-react" className="text-primary" target="_blank" rel="noopener noreferrer">Documentation</a> - which describes how to configure this version.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/credits-react" className="text-primary" target="_blank" rel="noopener noreferrer">Credits</a> - technical details of which versions are used for this framework.
</li>
<li>
<a href="https://webkom.gitbook.io/spin/v/airframe/airframe-react/roadmap-react" className="text-primary" target="_blank" rel="noopener noreferrer">Roadmap</a> - update for this technology for the coming months.
</li>
<li>
<b>Bugs</b> - do you see errors in this version? Please report vie email: <i>info@webkom.co</i>
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Other versions for &quot;Airframe&quot;:
</h6>
<ul className="pl-3">
<li>
<a href="http://dashboards.webkom.co/jquery/airframe" className="text-primary">jQuery</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react/airframe" className="text-primary">React</a> - based on the newest <i>Reactstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/react-next/airframe" className="text-primary">Next.js (React)</a> - based on the newest <i>Reactstrap</i> and <i>Next.js</i>
</li>
<li>
<a href="http://dashboards.webkom.co/angular/airframe" className="text-primary">Angular</a> - based on the newest <i>ng-bootstrap</i>
</li>
<li>
<a href="http://dashboards.webkom.co/net-mvc/airframe" className="text-primary">.NET MVC</a> - based on the newest <i>Bootstrap 4.x</i>
</li>
<li>
<a href="http://dashboards.webkom.co/vue/airframe" className="text-primary">Vue.js</a> - based on the newest <i>BootstrapVue</i>
</li>
<li>
<b>Other Versions</b>, such as <i>Ruby on Rails, Ember, Laravel etc.</i>, please ask for the beta version via email: info@webkom.co
</li>
</ul>
</section>
<section className="mb-5">
<h6>
Work Orders:
</h6>
<p>
Regarding configuration, changes under client&apos;s requirements.<br />
Pleace contact us through the <a href="http://wbkom.co/contact" className="text-primary" target="_blank" rel="noopener noreferrer">webkom.co/contact</a> website.
</p>
</section>
</Container>
);
}
}
const ExtendedNavbarOnly = withPageConfig(NavbarOnly);
export {
ExtendedNavbarOnly as NavbarOnly
};

100
app/routes/Layouts/NavbarOnly/components/LayoutNavbar.js Executable file
View File

@@ -0,0 +1,100 @@
import React from 'react';
import { Link } from 'react-router-dom';
import {
Button,
DropdownToggle,
Nav,
NavItem,
NavLink,
Avatar,
AvatarAddOn,
Navbar,
NavbarToggler,
UncontrolledDropdown,
ThemeConsumer,
} from './../../../../components';
import { randomAvatar } from './../../../../utilities';
import { NavbarActivityFeed } from
'./../../../../layout/components/NavbarActivityFeed';
import { NavbarMessages } from
'./../../../../layout/components/NavbarMessages';
import { NavbarUser } from
'./../../../../layout/components/NavbarUser';
import { DropdownProfile } from
'./../../../components/Dropdowns/DropdownProfile';
import { NavbarNavigation } from
'./../../../components/Navbars/NavbarNavigation';
import { LogoThemed } from
'./../../../components/LogoThemed/LogoThemed';
export const LayoutNavbar = () => (
<React.Fragment>
<Navbar light expand="lg" themed>
<Link to="/" className="navbar-brand mr-0 mr-sm-3">
<LogoThemed className="mb-1" checkBackground />
</Link>
<Nav pills>
<NavItem>
<NavLink tag={ NavbarToggler } id="navbar-navigation-toggler" className="b-0">
<i className="fa fa-fw fa-bars"></i>
</NavLink>
</NavItem>
</Nav>
{ /* Navigation with Collapse */ }
<NavbarNavigation pills />
{ /* END Navbar: Left Side */ }
{ /* START Navbar: Right Side */ }
<Nav className="ml-auto" pills>
<NavbarMessages />
<NavbarActivityFeed />
{ /* START Navbar: Dropdown */ }
<UncontrolledDropdown nav inNavbar>
<DropdownToggle nav>
<Avatar.Image
size="sm"
src={ randomAvatar() }
addOns={[
<AvatarAddOn.Icon
className="fa fa-circle"
color="white"
key="avatar-icon-bg"
/>,
<AvatarAddOn.Icon
className="fa fa-circle"
color="danger"
key="avatar-icon-fg"
/>
]}
/>
</DropdownToggle>
<DropdownProfile
right
/>
</UncontrolledDropdown>
{ /* END Navbar: Dropdown */ }
<NavbarUser className="d-none d-lg-block" />
</Nav>
{ /* END Navbar: Right Side */ }
</Navbar>
<Navbar light shadow expand="lg" className="py-3 bg-white">
<h1 className="mb-0 h4">
Navbar Only
</h1>
<ThemeConsumer>
{
({ color }) => (
<Button color={ color } className="px-4 my-sm-0">
Download <i className="fa ml-1 fa-fw fa-download"></i>
</Button>
)
}
</ThemeConsumer>
</Navbar>
</React.Fragment>
);

6
app/routes/Layouts/NavbarOnly/index.js Executable file
View File

@@ -0,0 +1,6 @@
import { NavbarOnly } from './NavbarOnly';
import { LayoutNavbar } from './components/LayoutNavbar';
NavbarOnly.Navbar = LayoutNavbar;
export default NavbarOnly;