Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | 3x 3x 3x 1x 3x 2x 3x 3x 3x | import React from 'react' import styled from 'styled-components' import PropTypes from 'prop-types' import { Flex, CloseButton, deprecatedPropType, Text } from 'pcln-design-system' const HeaderWrapper = styled(Flex)` height: 40px; ` const Title = styled(Text)` display: flex; align-items: center; ` const StyledCloseButton = styled(CloseButton)` height: 24px; width: 24px; svg { vertical-align: top; } &:focus { background-color: ${(props) => props.theme.palette.primary.dark}; outline: none; } ` const ModalHeader = ({ bg, color, onClose, title }) => ( <HeaderWrapper align='center' alignItems='center' color={color} bg={bg} px={3} > {title && ( <Title fontSize={1} bold> {title} </Title> )} {onClose && <StyledCloseButton onClick={onClose} ml='auto' />} </HeaderWrapper> ) ModalHeader.displayName = ModalHeader ModalHeader.propTypes = { bg: deprecatedPropType('color'), onClose: PropTypes.func, color: PropTypes.string, title: PropTypes.string, } ModalHeader.defaultProps = { bg: 'blue', color: 'white', } export default ModalHeader |