From 99af843c801e20955ab113d390669a2bf9b0819a Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Thu, 24 Jan 2019 18:44:25 +0100
Subject: [PATCH] add Backdrop component

---
 src/components/Backdrop/index.js | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/Backdrop/index.js

diff --git a/src/components/Backdrop/index.js b/src/components/Backdrop/index.js
new file mode 100644
index 00000000..328a7a40
--- /dev/null
+++ b/src/components/Backdrop/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import PropTypes from 'prop-types';
+import { FADE_IN } from 'config/animations';
+
+
+const StyledBackdrop = styled.div`
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: 100;
+    left: 0;
+    top: 0;
+    background-color: rgba(0,0,0,0.5);
+
+    ${props => props.animated && css`
+        animation: ${FADE_IN} 0.3s;
+    `};
+`;
+
+const Backdrop = ({
+    className,
+    show,
+    animated,
+    onClick,
+}) => (
+    show ? <StyledBackdrop className={className} animated={animated} onClick={onClick} /> : null
+);
+
+Backdrop.propTypes = {
+    show: PropTypes.bool.isRequired,
+    className: PropTypes.string,
+    animated: PropTypes.bool,
+    onClick: PropTypes.func,
+};
+
+export default Backdrop;