@lyra/base/lib/components/DefaultRootComponent.js

Lyra plugin containing the base components and roles for a Lyra configuration

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

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

const styles = `
#lyra-root {font: 1.5em sans-serif; padding: 0 1em; max-width: 800px;}
code {background: #f7f7f7;}
pre code {color: #444; display: block; padding: 1em;}
code span {color: #880000;}
@media screen and (max-width: 480px) {
  #lyra-root {font-size: 1em; padding: 0 0.5em;}
}`; /* eslint-disable react/no-danger */


const exampleManifest = `{
  "plugins": [
    <span>"@lyra/base"</span>,
    <span>"@lyra/default-layout"</span>
  ]
}`;

function DefaultRootComponent() {
  return _react2.default.createElement(
    'div',
    { id: 'lyra-root' },
    _react2.default.createElement(
      'style',
      null,
      styles
    ),
    _react2.default.createElement(
      'h1',
      null,
      'Hello, Lyra!'
    ),
    _react2.default.createElement(
      'p',
      null,
      'If you are seeing this, it means that no plugin has fulfilled the',
      ' ',
      _react2.default.createElement(
        'code',
        null,
        'part:@lyra/base/root'
      ),
      ' role.'
    ),
    _react2.default.createElement(
      'p',
      null,
      'Usually, this role is filled by a plugin such as',
      ' ',
      _react2.default.createElement(
        'code',
        null,
        '@lyra/default-layout'
      ),
      '.'
    ),
    _react2.default.createElement(
      'h2',
      null,
      'How do I fix it?'
    ),
    _react2.default.createElement(
      'p',
      null,
      'In the ',
      _react2.default.createElement(
        'code',
        null,
        'lyra.json'
      ),
      ' file of your Lyra configuration, add a plugin that fulfills the ',
      _react2.default.createElement(
        'code',
        null,
        'part:@lyra/base/root'
      ),
      ' role. For instance:'
    ),
    _react2.default.createElement(
      'pre',
      null,
      _react2.default.createElement('code', { dangerouslySetInnerHTML: { __html: exampleManifest } })
    ),
    _react2.default.createElement(
      'p',
      null,
      'Thanks for using Lyra!'
    )
  );
}

exports.default = DefaultRootComponent;