From 09eea921546d98d31da53a60d25df2e68ed56efb Mon Sep 17 00:00:00 2001
From: Nick Van Doorn <vandoorn.nick@gmail.com>
Date: Tue, 19 Mar 2019 02:27:10 -0700
Subject: Abstract away image caption, style, & link

---
 src/components/image.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/components/image.js

(limited to 'src')

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>
+  )
+}
-- 
cgit v1.2.3