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

Design System for Axeptio

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

const Root = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  background-color: #e22f5a;
  border-radius: 50%;

  ${props =>
    props.success
      ? `
      background-color: #14b8a6;
      box-shadow: 0px 0px 0px 2px #f4f6fb,
                  0px 0px 0px 4px rgba(20, 184, 166, 0.1),
                  0px 0px 0px 6px #f4f6fb,
                  0px 0px 0px 8px rgba(20, 184, 166, 0.05);`
      : `
      box-shadow: 0px 0px 0px 2px #f4f6fb,
                  0px 0px 0px 4px rgba(226, 47, 90, 0.1),
                  0px 0px 0px 6px #f4f6fb,
                  0px 0px 0px 8px rgba(226, 47, 90, 0.05);
  `}
`;

export default function Status({ success }) {
  return (
    <Root success={success}>
      {success ? (
        <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M4.45455 9.10219L1.11364 5.7613L0 6.87493L4.45455 11.3295L14 1.78404L12.8864 0.67041L4.45455 9.10219Z"
            fill="white"
          />
        </svg>
      ) : (
        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M0.92308 12L0 11.077L5.07694 6.00002L0 0.92308L0.92308 0L6.00002 5.07694L11.077 0L12 0.92308L6.9231 6.00002L12 11.077L11.077 12L6.00002 6.9231L0.92308 12Z"
            fill="white"
          />
        </svg>
      )}
    </Root>
  );
}

Status.propTypes = {
  success: PropTypes.bool
};