diff options
| -rw-r--r-- | src/components/image.js | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/src/components/image.js b/src/components/image.js new file mode 100644 index 0000000..df5ddb3 --- /dev/null +++ b/src/components/image.js @@ -0,0 +1,30 @@ +import React from 'react' +import { css } from '@emotion/core' +import { margins } from './globals' + +const imgContainerStyle = css` + text-align: right; + & a { + border-bottom: none; + } +` + +export const Image = ({ imgUrl, caption, noShadow }) => { + const imgStyle = css` + max-height: 300px; + align-self: flex-end; + ${!noShadow + ? `box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);` + : ''} + 0 15px 12px rgba(0, 0, 0, 0.22); + margin-bottom: ${margins.md}px; + ` + return ( + <div css={imgContainerStyle}> + <a href={imgUrl} target="_blank" rel="noopener noreferrer"> + <img css={imgStyle} src={imgUrl} alt={caption} /> + </a> + <figcaption>{caption}</figcaption> + </div> + ) +} |