wip: basic image with arrows

newrelic · Jun 21, 2021 · 1b0951c · 1b0951c
1 parent 7780b79
commit 1b0951c
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 4 deletions.
diff --git a/src/@newrelic/gatsby-theme-newrelic/icons/feather.js b/src/@newrelic/gatsby-theme-newrelic/icons/feather.js
@@ -34,6 +34,11 @@ export default {
       />
     </>
   ),
+  'chevron-right': (
+    <>
+      <polyline points="9 18 15 12 9 6" />
+    </>
+  ),
   clock: (
     <>
       <circle cx="12" cy="12" r="10" />

diff --git a/src/components/ImageSlider/ImageSlider.js b/src/components/ImageSlider/ImageSlider.js
@@ -0,0 +1,76 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { css } from '@emotion/react';
+import { Icon } from '@newrelic/gatsby-theme-newrelic';
+
+const ImageSlider = ({ images, height }) => {
+  const [selectedImageIndex, setSelectedImageIndex] = useState(0);
+
+  const handleClickNext = () => {
+    const nextImageIndex = selectedImageIndex + 1;
+    setSelectedImageIndex(nextImageIndex % images.length);
+  };
+
+  return (
+    <div
+      css={css`
+        position: relative;
+        margin-bottom: 2rem;
+      `}
+    >
+      <button
+        onClick={handleClickNext}
+        css={css`
+          position: absolute;
+          top: 38%;
+          right: 0;
+          background: none;
+          color: var(--color-white);
+          border: none;
+          cursor: pointer;
+        `}
+      >
+        <Icon name="chevron-right" size="4rem" />
+      </button>
+      {CreateImageBlock(images[selectedImageIndex], height)}
+    </div>
+  );
+};
+
+ImageSlider.propTypes = {
+  images: PropTypes.array,
+  height: PropTypes.number,
+};
+
+const CreateImageBlock = (image, height) => {
+  return (
+    <a
+      href={image}
+      target="_blank"
+      rel="noreferrer"
+      css={css`
+        height: ${height}px;
+        width: 100%;
+        margin-right: 1rem;
+      `}
+    >
+      <img
+        src={image}
+        alt="placeholder-text"
+        css={css`
+          height: ${height}px;
+          width: 100%;
+          box-sizing: border-box;
+          box-shadow: inset 0px 0px 0px 4px var(--divider-color);
+          border-radius: 4px;
+          padding: 0.25rem;
+        `}
+      />
+    </a>
+  );
+};
+
+const noImagePlaceholder =
+  'https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png';
+
+export default ImageSlider;
diff --git a/src/templates/ObservabilityPackDetails.js b/src/templates/ObservabilityPackDetails.js
@@ -14,6 +14,7 @@ import {
 import ImageGallery from '../components/ImageGallery';
 import Intro from '../components/Intro';
 import InstallButton from '../components/InstallButton';
+import ImageSlider from '../components/ImageSlider/ImageSlider';
 
 const ObservabilityPackDetails = ({ data, location }) => {
   const pack = data.observabilityPacks;
@@ -134,7 +135,7 @@ const ObservabilityPackDetails = ({ data, location }) => {
                 {pack.dashboards?.map((dashboard) => (
                   <>
                     <h3>{dashboard.name}</h3>
-                    <ImageGallery images={dashboard.screenshots} />
+                    <ImageSlider height={400} images={dashboard.screenshots} />
                     {dashboard.description && (
                       <>
                         <h4>Description</h4>
@@ -267,11 +268,8 @@ export const pageQuery = graphql`
   query($id: String!) {
     observabilityPacks(id: { eq: $id }) {
       name
-      websiteUrl
-      logoUrl
       level
       id
-      iconUrl
       description
       dashboards {
         description