jobiqo-cl/lib/src/components/04-organisms/04-landingpage/01-flat-banner/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var tslib_es6 = require('../../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index_esm$2 = require('../../../../../node_modules/@styled-system/color/dist/index.esm.js');
var index_esm$9 = require('../../../../../node_modules/@styled-system/space/dist/index.esm.js');
require('../../../../../node_modules/styled-system/dist/index.esm.js');

/**
 * @file index.tsx
 *
 * @fileoverview Shows a flat banner to use on landing pages.
 */
const StyledFlatBanner = styled__default.div `
  background: ${props => props.theme.flatbanner.backgroundColor[props.flatbannerStyle]};
  color: ${props => props.theme.flatbanner.color};
  padding: ${props => props.theme.flatbanner.padding};
  border-width: 1;
  align-items: center;
  justify-content: center;
  display: flex;
  flex: 1;
  flex-direction: column;
  ${index_esm$9.space}
  ${index_esm$2.color}
`;
const StyledFlatBannerText = styled__default.div `
  padding: 1rem;
  border-width: 1;
`;
/**
 * This component provides a text with backgroud color.
 */
const FlatBanner = (_a) => {
    var { children, flatbannerStyle = 'primary' } = _a, props = tslib_es6.__rest(_a, ["children", "flatbannerStyle"]);
    return (React__default.createElement(StyledFlatBanner, Object.assign({ flatbannerStyle: flatbannerStyle }, props),
        React__default.createElement(StyledFlatBannerText, null, children)));
};

exports.FlatBanner = FlatBanner;
exports.StyledFlatBanner = StyledFlatBanner;