From 2b432272e3cd8042bcd9d64d536997585121bf40 Mon Sep 17 00:00:00 2001
From: Kris Kenney <70179215+nr-kkenney@users.noreply.github.com>
Date: Thu, 3 Jun 2021 17:13:21 -0700
Subject: [PATCH] feat: implement image gallery

---
 src/components/ImageGallery/ImageGallery.js | 72 +++++++++++++++++++++
 src/components/ImageGallery/index.js        |  1 +
 2 files changed, 73 insertions(+)
 create mode 100644 src/components/ImageGallery/ImageGallery.js
 create mode 100644 src/components/ImageGallery/index.js

diff --git a/src/components/ImageGallery/ImageGallery.js b/src/components/ImageGallery/ImageGallery.js
new file mode 100644
index 000000000..bbff79e37
--- /dev/null
+++ b/src/components/ImageGallery/ImageGallery.js
@@ -0,0 +1,72 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+
+// TODO: replace with import of image, rather than grabbing one off the web
+const noImagePlaceholder =
+  'https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png';
+
+const CreateImageBlock = (image) => {
+  return (
+    <a href={image} target="_blank" rel="noreferrer">
+      <img
+        src={image}
+        alt="placeholder-text"
+        css={css`
+          width: 285px;
+          height: 207px;
+
+          background: linear-gradient(0deg, #f3f4f4, #f3f4f4),
+            linear-gradient(
+              293.05deg,
+              #70d3af -73.46%,
+              #007e8a -24.52%,
+              #052a3a 69.75%
+            );
+          border: 1px solid rgba(0, 0, 0, 0.1);
+          box-sizing: border-box;
+          box-shadow: inset 0px 0px 0px 4px #ffffff;
+          border-radius: 4px;
+          padding: 3px;
+
+          margin-right: 16px;
+          margin-bottom: 6px;
+
+          object-fit: cover;
+        `}
+      />
+    </a>
+  );
+};
+
+/**
+ * @param {Object} props
+ * @param {String[]} props.images - Array of images urls.
+ * @param {String} props.className
+ */
+const ImageGallery = ({ images, className }) => {
+  return (
+    <div
+      className={className}
+      css={css`
+        display: flex;
+        white-space: nowrap;
+        overflow-x: auto;
+        margin-bottom: 32px;
+      `}
+    >
+      {images && images.length > 0
+        ? images.map((image) => {
+            return CreateImageBlock(image);
+          })
+        : CreateImageBlock(noImagePlaceholder)}
+    </div>
+  );
+};
+
+ImageGallery.propTypes = {
+  images: PropTypes.arrayOf(PropTypes.string),
+  className: PropTypes.string,
+};
+
+export default ImageGallery;
diff --git a/src/components/ImageGallery/index.js b/src/components/ImageGallery/index.js
new file mode 100644
index 000000000..db657797b
--- /dev/null
+++ b/src/components/ImageGallery/index.js
@@ -0,0 +1 @@
+export { default } from './ImageGallery';