aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/overlay.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/ui/overlay.tsx')
-rw-r--r--packages/website/ts/components/ui/overlay.tsx34
1 files changed, 34 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
new file mode 100644
index 000000000..bb2ed8e59
--- /dev/null
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -0,0 +1,34 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { zIndex } from 'ts/utils/style';
+
+export interface OverlayProps {
+ children?: React.ReactNode;
+ style?: React.CSSProperties;
+ onClick?: () => void;
+}
+
+const style: React.CSSProperties = {
+ position: 'fixed',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ zIndex: zIndex.overlay,
+ backgroundColor: 'rgba(0, 0, 0, 0.6)',
+};
+
+export const Overlay: React.StatelessComponent = (props: OverlayProps) => (
+ <div style={{ ...style, ...props.style }} onClick={props.onClick}>
+ {props.children}
+ </div>
+);
+
+Overlay.defaultProps = {
+ style: {},
+ onClick: _.noop,
+};
+
+Overlay.displayName = 'Overlay';