@wenn/onb/ErrorPage.js

onb-core

import React from 'react';
import styled from 'styled-components';
import Emoji from '@bit/wenance.common-ui.web.emoji';

const Container = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  background-image: linear-gradient(
    rgb(255, 255, 255) 70%,
    ${props => props.gradientColor} 100%
  );
  @import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');
  font-family: 'Montserrat', sans-serif;
`;

Container.defaultProps = {
  gradientColor: 'rgb(255, 255, 255)'
};

const Wrapper = styled.div`
  margin: auto;
  color: black;
  max-width: 480px;
  box-sizing: border-box;
  width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
`;

const Title = styled.h2`
  font-size: 16px;
  text-align: center;
  color: #000000;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.46429em;
`;

const Description = styled.p`
  margin: 35px auto;
  color: #000000;
  font-size: 0.875rem;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.46429em;
`;

const Link = styled.a`
  display: block;
  font-family: inherit;
  opacity: 1;
  text-align: center;
  touch-action: manipulation;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
  width: 100%;
  cursor: pointer;
  background-color: ${props => props.buttonColor || 'rgb(254, 116, 20)'};
  color: rgb(255, 255, 255);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  border-radius: 0.5rem;
  transition: background-color 0.4s ease-in-out 0s;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-image: initial;
  padding: 10px 0px;
  text-decoration: none;
  &:hover,
  &:active {
    background: ${props => props.buttonColor || '#a54b0d'};
    color: #ffffff;
  }
`;

const Mail = styled.a`
  text-decoration: none;
  &:active {
    text-decoration: none;
  }
`;

const Logo = styled.img`
  max-width: 110px;
  padding-left: 1rem;
  padding-top: 1rem;
`;

const ErrorPage = ({ WORDING: data }) => {
  return (
    <Container gradientColor={data.gradientColor}>
      <Logo src={data.logo} />
      <Wrapper>
        {data.img && <img src={data.img} />}
        {data.icon &&
          <Emoji style={{ fontSize: '4.75rem' }}>
            {data.icon}
          </Emoji>
        }
        <Title>{data.title}</Title>
        <Description>
          {data.description}
          <Mail href={data.mailto}>{data.email}</Mail>.
        </Description>
        <Link buttonColor={data.buttonColor} href={data.redirect}>
          {data.cta}
        </Link>
      </Wrapper>
    </Container>
  );
};

export default ErrorPage;