Skip to content

Home

Jump to bottom
Rafael de Bastiani edited this page Jan 13, 2018 · 12 revisions

For use any component, theme provider is required.

import { ThemeProvider, injectGlobal } from 'styled-components';
import theme from '@rafacdb/bah/src/theme';

Example of usage:

import React, { Component } from 'react';
import { ThemeProvider, injectGlobal } from 'styled-components';
import { Link, Route } from 'react-router-dom';
import 'font-awesome/css/font-awesome.min.css';
import theme from '@rafacdb/bah/src/theme';
import { LayoutAdmin, Header, Nav, Article, Footer, Sidebar, SidebarItem } from '@rafacdb/bah';

import Page from '../page/page';
import Dashboard from '../dashboard/dashboard';

class Admin extends Component {
  render() {
    // eslint-disable-next-line
    injectGlobal`
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        font-family: ${theme.bahFontFamily};
        color: ${theme.bahDefaultTextColor};
        background-color: ${theme.bahDefaultBackgroundColor};
      }
    `;
    return (
      <div>
        <ThemeProvider theme={theme}>
          <div>
            <Header>header</Header>
            <LayoutAdmin>
              <Article>
                {this.props.children}
                <Route path="/page" component={Page} />
                <Route path="/dashboard" component={Dashboard} />
              </Article>
              <Nav>
                <Sidebar>
                  <SidebarItem>
                    <input type="checkbox" id="menu1" />
                    <label htmlFor="menu1">Principal</label>
                    <ul>
                      <li>
                        <Link to="/">
                          <i className={'fa fa-home'} /> Home
                        </Link>
                      </li>
                      <li>
                        <Link to="/dashboard">Dashboard</Link>
                      </li>
                      <li>
                        <Link to="/page">Páginas</Link>
                      </li>
                    </ul>
                  </SidebarItem>
                </Sidebar>
              </Nav>
            </LayoutAdmin>
            <Footer>Footer</Footer>
          </div>
        </ThemeProvider>
      </div>
    );
  }
}

export default Admin;

List of components

Clone this wiki locally