Skip to content

Instantly share code, notes, and snippets.

@kamleshchandnani
Created March 2, 2019 14:56
Show Gist options
  • Save kamleshchandnani/13851407b88447ed23ab6881b3297dc6 to your computer and use it in GitHub Desktop.
Save kamleshchandnani/13851407b88447ed23ab6881b3297dc6 to your computer and use it in GitHub Desktop.
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const styles = {
borderRadius(props) {
if (props.shape === 'bluntEdged') {
return props.theme.borderRadius;
}
if (props.shape === 'sharpEdged') {
return '0';
}
if (props.shape === 'circular') {
return '100%';
}
return '';
},
};
const Img = styled(
({
shape,
grayscale,
borderRadius,
className,
...props
}) => <amp-img class={className} {...props} />,
)`
filter: ${(props) => props.grayscale ? 'grayscale(1)' : 'grayscale(0)'};
border-radius: ${styles.borderRadius};
`;
Img.propTypes = {
src: PropTypes.string.isRequired,
alt: PropTypes.string.isRequired,
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
layout: PropTypes.oneOf(['responsive']),
shape: PropTypes.oneOf(['bluntEdged', 'sharpEdged', 'circular']),
grayscale: PropTypes.bool,
borderRadius: PropTypes.string,
};
Img.defaultProps = {
shape: 'sharpEdged',
grayscale: false,
};
export default Img;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment