tao-react-components/lib/docs/Home.js

react components crafted with love by Tao

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRouter = require('react-router');

var _reactPrism = require('react-prism');

var _dentist = require('dentist');

var _reactstrap = require('reactstrap');

var _components = require('../components');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var example = (0, _dentist.dedent)('\n  import React from \'react\';\n  import { HelloWorld } from \'component-template\';\n\n  const Example = () => {\n    return (\n      <HelloWorld name="World" />\n    );\n  };\n\n  export default Example;\n');

var Home = function Home(_ref) {
  var title = _ref.title,
      gh = _ref.gh;

  return _react2.default.createElement(
    'div',
    null,
    _react2.default.createElement(
      _reactstrap.Jumbotron,
      { tag: 'section', className: 'jumbotron-header text-center my-5' },
      _react2.default.createElement(
        _reactstrap.Container,
        { fluid: true },
        _react2.default.createElement(
          _reactstrap.Row,
          null,
          _react2.default.createElement(
            _reactstrap.Col,
            { sm: { size: 10, offset: 1 } },
            _react2.default.createElement(
              'h1',
              { className: 'display-4' },
              title
            ),
            _react2.default.createElement(
              'p',
              { className: 'lead my-3' },
              'An example reactstrap component built, documented & published with ',
              _react2.default.createElement(
                'a',
                { href: 'https://github.com/reactstrap/component-template' },
                'Component Template'
              )
            ),
            _react2.default.createElement(
              'p',
              null,
              _react2.default.createElement(
                _reactstrap.Button,
                { outline: true, color: 'danger', href: 'https://github.com/' + gh },
                'View on Github'
              ),
              _react2.default.createElement(
                _reactstrap.Button,
                { tag: _reactRouter.Link, color: 'danger', to: '/documentation' },
                'Documentation'
              )
            )
          )
        )
      )
    ),
    _react2.default.createElement(
      _reactstrap.Container,
      { fluid: true },
      _react2.default.createElement(
        _reactstrap.Row,
        null,
        _react2.default.createElement(
          _reactstrap.Col,
          { sm: { size: 8, offset: 2 } },
          _react2.default.createElement(
            'h2',
            null,
            'Getting Started'
          ),
          _react2.default.createElement('hr', null),
          _react2.default.createElement(
            'p',
            null,
            'Install and save the component to your project'
          ),
          _react2.default.createElement(
            'pre',
            null,
            _react2.default.createElement(
              _reactPrism.PrismCode,
              { className: 'language-bash' },
              'npm install component-template --save'
            )
          ),
          _react2.default.createElement(
            'p',
            null,
            'ES6 - import the component you need'
          ),
          _react2.default.createElement(
            'div',
            { className: 'docs-example' },
            _react2.default.createElement(_components.HelloWorld, { name: 'World' })
          ),
          _react2.default.createElement(
            'pre',
            null,
            _react2.default.createElement(
              _reactPrism.PrismCode,
              { className: 'language-jsx' },
              example
            )
          )
        )
      )
    )
  );
};

exports.default = Home;