From d1d14f1b8f2e3921d7b244dcf5d8594b913382f5 Mon Sep 17 00:00:00 2001
From: Chuck Dries <chuck@chuckdries.com>
Date: Mon, 11 Jul 2022 16:52:16 -0700
Subject: [PATCH] WIP put arrows on either side of gallery image

---
 src/components/GalleryImage/GalleryImage.js | 257 +++++++++++---------
 1 file changed, 143 insertions(+), 114 deletions(-)

diff --git a/src/components/GalleryImage/GalleryImage.js b/src/components/GalleryImage/GalleryImage.js
index 5784441..02248b5 100644
--- a/src/components/GalleryImage/GalleryImage.js
+++ b/src/components/GalleryImage/GalleryImage.js
@@ -166,7 +166,7 @@ const GalleryImage = ({
           >
             gallery <span className="bg-gray-300 text-black">esc</span>
           </Link>
-          {prevImage && (
+          {/* {prevImage && (
             <Link
               className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
               state={{
@@ -179,8 +179,8 @@ const GalleryImage = ({
             >
               previous <span className="bg-gray-300 text-black">&#11104;</span>
             </Link>
-          )}
-          {nextImage && (
+          )} */}
+          {/* {nextImage && (
             <Link
               className="hover:underline text-vibrant-light hover:text-muted-light mx-1"
               state={{
@@ -193,127 +193,156 @@ const GalleryImage = ({
             >
               next <span className="bg-gray-300 text-black">&#11106;</span>
             </Link>
-          )}
+          )} */}
         </nav>
-        <div className={classnames("flex", orientationClasses)}>
-          <div
-            className={classnames(
-              zoom ? "cursor-zoom-out" : "cursor-zoom-in",
-              "mb-2"
-            )}
-            onClick={() => setZoom((_zoom) => !_zoom)}
-            style={{
-              maxWidth: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
-            }}
-          >
-            {zoom ? (
-              <img
-                alt={name}
-                src={image.publicURL}
-                style={{
-                  width: canonicalSize.width / window.devicePixelRatio,
-                  maxWidth: "unset",
-                }}
-              />
-            ) : (
-              <GatsbyImage
-                alt={name}
-                className="border-4 border-vibrant"
-                image={getImage(image)}
-                key={image.base}
-                loading="eager"
-                objectFit="contain"
-              />
-            )}
-          </div>
-          <div
-            className={classnames(
-              "px-2 flex flex-row portrait:items-end mx-auto",
-              ar <= 1
-                ? "pt-5 flex-col flex-auto text-right"
-                : "landscape:container portrait:pt-5 portrait:flex-col portrait:text-right"
-            )}
-          >
-            <div className="flex-auto mr-2">
-              <p className="text-muted-light font-mono text-sm m-0 mt-1">
-                {image.base}
-              </p>
-              {hasName(image) && (
-                <h1 className="text-4xl mt-0 font-serif">{name}</h1>
+        <div className="flex justify-between flex-auto items-center">
+          {prevImage && (
+            <Link
+              className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
+              state={{
+                currentIndex: currentIndex - 1,
+                sortedImageList,
+                filterKeyword,
+                sortKey,
+              }}
+              to={`/photogallery/${prevImage}/`}
+            >
+              previous <span className="bg-gray-300 text-black">&#11104;</span>
+            </Link>
+          )}
+          <div className={classnames("pb-2 flex", orientationClasses)}>
+            <div
+              className={classnames(
+                zoom ? "cursor-zoom-out" : "cursor-zoom-in",
+                "mb-2 self-center"
               )}
-              <p className="landscape:mr-2">{meta.Caption}</p>
-              <a
-                className="cursor-pointer inline-block bg-muted-light text-vibrant-dark font-serif p-1 my-1 rounded"
-                download
-                href={image.publicURL}
-                onClick={() => {
-                  try {
-                    window.plausible("Download Wallpaper", {
-                      props: { image: image.base },
-                    });
-                  } catch {
-                    // do nothing
-                  }
-                }}
-              >
-                Download wallpaper
-              </a>
-            </div>
-            {
-              <div
-                className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
-                style={{ width: 30 }}
-              ></div>
-            }
-            <div className="flex flex-col items-end">
-              <MetadataItem
-                data={dateTaken.toLocaleDateString()}
-                icon={<Calendar />}
-                title="date taken"
-              />
-              <div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
-                <MetadataItem
-                  data={shutterSpeed}
-                  icon={<Stopwatch />}
-                  title="shutter speed"
+              onClick={() => setZoom((_zoom) => !_zoom)}
+              style={{
+                maxWidth: `calc(max(calc(100vh - ${verticalPad}), 500px) * ${ar})`,
+              }}
+            >
+              {zoom ? (
+                <img
+                  alt={name}
+                  src={image.publicURL}
+                  style={{
+                    width: canonicalSize.width / window.devicePixelRatio,
+                    maxWidth: "unset",
+                  }}
                 />
-                {meta.FNumber && (
+              ) : (
+                <GatsbyImage
+                  alt={name}
+                  className="border-4 border-vibrant"
+                  image={getImage(image)}
+                  key={image.base}
+                  loading="eager"
+                  objectFit="contain"
+                />
+              )}
+            </div>
+            <div
+              className={classnames(
+                "px-2 flex flex-row portrait:items-end mx-auto",
+                ar <= 1
+                  ? "pt-5 flex-col flex-auto text-right"
+                  : "landscape:container portrait:pt-5 portrait:flex-col portrait:text-right"
+              )}
+            >
+              <div className="flex-auto mr-2">
+                <p className="text-muted-light font-mono text-sm m-0 mt-1">
+                  {image.base}
+                </p>
+                {hasName(image) && (
+                  <h1 className="text-4xl mt-0 font-serif">{name}</h1>
+                )}
+                <p className="landscape:mr-2">{meta.Caption}</p>
+                <a
+                  className="cursor-pointer inline-block bg-muted-light text-vibrant-dark font-serif p-1 my-1 rounded"
+                  download
+                  href={image.publicURL}
+                  onClick={() => {
+                    try {
+                      window.plausible("Download Wallpaper", {
+                        props: { image: image.base },
+                      });
+                    } catch {
+                      // do nothing
+                    }
+                  }}
+                >
+                  Download wallpaper
+                </a>
+              </div>
+              {
+                <div
+                  className="portrait:border-t-2 border-muted-light portrait:mt-2 mr-2 portrait:mb-1"
+                  style={{ width: 30 }}
+                ></div>
+              }
+              <div className="flex flex-col items-end">
+                <MetadataItem
+                  data={dateTaken.toLocaleDateString()}
+                  icon={<Calendar />}
+                  title="date taken"
+                />
+                <div className="flex justify-end gap-2 border border-vibrant-light pl-2 rounded">
                   <MetadataItem
-                    data={`f/${meta.FNumber}`}
-                    icon={<Exposure />}
-                    title="aperture"
+                    data={shutterSpeed}
+                    icon={<Stopwatch />}
+                    title="shutter speed"
+                  />
+                  {meta.FNumber && (
+                    <MetadataItem
+                      data={`f/${meta.FNumber}`}
+                      icon={<Exposure />}
+                      title="aperture"
+                    />
+                  )}
+                  <MetadataItem data={meta.ISO} icon={<Filmroll />} title="ISO" />
+                </div>
+                <MetadataItem
+                  data={locationString}
+                  icon={<Location />}
+                  title="location"
+                />
+                {(meta.Make || meta.Model) && (
+                  <MetadataItem
+                    data={[meta.Make, meta.Model].join(" ")}
+                    icon={<Camera />}
+                    title="camera"
+                  />
+                )}
+                {(meta.LensModel || meta.FocalLength) && (
+                  <MetadataItem
+                    data={[
+                      meta.LensModel === "----" ? null : meta.LensModel,
+                      meta.FocalLength && `${meta.FocalLength}mm`,
+                    ]
+                      .filter(Boolean)
+                      .join(" @")}
+                    icon={<Circle />}
+                    title="lens"
                   />
                 )}
-                <MetadataItem data={meta.ISO} icon={<Filmroll />} title="ISO" />
               </div>
-              <MetadataItem
-                data={locationString}
-                icon={<Location />}
-                title="location"
-              />
-              {(meta.Make || meta.Model) && (
-                <MetadataItem
-                  data={[meta.Make, meta.Model].join(" ")}
-                  icon={<Camera />}
-                  title="camera"
-                />
-              )}
-              {(meta.LensModel || meta.FocalLength) && (
-                <MetadataItem
-                  data={[
-                    meta.LensModel === "----" ? null : meta.LensModel,
-                    meta.FocalLength && `${meta.FocalLength}mm`,
-                  ]
-                    .filter(Boolean)
-                    .join(" @")}
-                  icon={<Circle />}
-                  title="lens"
-                />
-              )}
             </div>
           </div>
+          {nextImage && (
+            <Link
+              className="hover:underline text-vibrant-light hover:text-muted-light mx-1 self-stretch flex items-center bg-opacity-5 hover:bg-black"
+              state={{
+                currentIndex: currentIndex + 1,
+                sortedImageList,
+                filterKeyword,
+                sortKey,
+              }}
+              to={`/photogallery/${nextImage}/`}
+            >
+              next <span className="bg-gray-300 text-black">&#11106;</span>
+            </Link>
+          )}
         </div>
-        <div></div>
       </div>
     </>
   );