@axeptio/design-system/src/_components/Previewer.jsx

Design System for Axeptio

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Root = styled.div`
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  padding: 30px;
  min-height: 360px;
  background-color: ${props => props.theme.colors.grey.v200};
  border-radius: 16px;

  ${props =>
    props.yellowLight &&
    `
    background-color: ${props.theme.colors.primaryPalette.v50};
  `};

  ${props =>
    props.gradient &&
    `
    background: linear-gradient(140deg, rgba(250, 198, 161, 0.4) 0%, rgba(169, 221, 215, 0.4) 58%, rgba(175, 194, 231, 0.4) 76%)
  `}

  ${props =>
    props.huge &&
    `
    min-height: 600px;
  `}
`;

const Sticky = styled.div`
  position: absolute;
  top: 24px;
  left: 24px;
`;

export default function Previewer({ children, sticky, yellowLight, gradient, huge }) {
  return (
    <Root huge={huge} yellowLight={yellowLight} gradient={gradient}>
      {sticky ? <Sticky>{sticky}</Sticky> : null}
      {children}
    </Root>
  );
}

Previewer.propTypes = {
  children: PropTypes.node,
  sticky: PropTypes.node,
  yellowLight: PropTypes.bool,
  gradient: PropTypes.bool,
  huge: PropTypes.bool
};