diff options
Diffstat (limited to 'packages/instant/src/components/ui/overlay.tsx')
-rw-r--r-- | packages/instant/src/components/ui/overlay.tsx | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/packages/instant/src/components/ui/overlay.tsx b/packages/instant/src/components/ui/overlay.tsx new file mode 100644 index 000000000..7110ee70f --- /dev/null +++ b/packages/instant/src/components/ui/overlay.tsx @@ -0,0 +1,40 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { ColorOption, overlayBlack, styled } from '../../style/theme'; + +import { Container } from './container'; +import { Flex } from './flex'; +import { Icon } from './icon'; + +export interface OverlayProps { + className?: string; + onClose?: () => void; + zIndex?: number; +} + +const PlainOverlay: React.StatelessComponent<OverlayProps> = ({ children, className, onClose }) => ( + <Flex height="100vh" className={className}> + <Container position="absolute" top="0px" right="0px" display={{ default: 'initial', sm: 'none' }}> + <Icon height={18} width={18} color={ColorOption.white} icon="closeX" onClick={onClose} padding="2em 2em" /> + </Container> + <Container width={{ default: 'auto', sm: '100%' }} height={{ default: 'auto', sm: '100%' }}> + {children} + </Container> + </Flex> +); +export const Overlay = styled(PlainOverlay)` + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: ${props => props.zIndex} + background-color: ${overlayBlack}; +`; + +Overlay.defaultProps = { + zIndex: 100, +}; + +Overlay.displayName = 'Overlay'; |