2020-02-13 10:41:47 +01:00
|
|
|
import styled from 'styled-components';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
const CardImgWrapper = styled.div`
|
2020-02-19 08:10:40 +01:00
|
|
|
position: relative;
|
2020-02-13 10:41:47 +01:00
|
|
|
height: ${({ isSmall }) => (isSmall ? '127px' : '156px')};
|
2020-02-13 12:48:13 +01:00
|
|
|
min-width: ${({ isSmall }) => (isSmall ? '200px' : '245px')};
|
2020-02-13 10:41:47 +01:00
|
|
|
border-radius: 2px;
|
2020-02-13 12:48:13 +01:00
|
|
|
background: ${({ withOverlay }) => (withOverlay ? '#F6F6F6' : '#333740')};
|
2020-02-19 11:21:25 +01:00
|
|
|
|
|
|
|
${({ hasError }) => {
|
|
|
|
if (hasError) {
|
|
|
|
return `
|
|
|
|
background: #F2F3F4;
|
|
|
|
border: 1px solid #FF5D00;
|
|
|
|
`;
|
|
|
|
}
|
|
|
|
|
|
|
|
return '';
|
|
|
|
}}
|
2020-02-13 10:41:47 +01:00
|
|
|
`;
|
|
|
|
|
|
|
|
CardImgWrapper.defaultProps = {
|
2020-02-19 11:21:25 +01:00
|
|
|
hasError: false,
|
2020-02-13 10:41:47 +01:00
|
|
|
isSmall: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
CardImgWrapper.propTypes = {
|
2020-02-19 11:21:25 +01:00
|
|
|
hasError: PropTypes.bool,
|
2020-02-13 10:41:47 +01:00
|
|
|
isSmall: PropTypes.bool,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default CardImgWrapper;
|