Enhanced gallery on larger screens

components/product/DesktopGallery/DesktopGallery.module.css

@@ -0,0 +1,98 @@
+.slider {
+  @apply relative w-full h-full;
+  overflow-y: hidden;
+  cursor: pointer;
+}
+
+@screen md {
+  .slider {
+    display: none;
+  }
+}
+
+.leftControl,
+.rightControl {
+  @apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  @apply bg-hover-2;
+}
+
+.leftControl:hover,
+.rightControl:hover {
+  @apply outline-none shadow-outline-normal;
+}
+
+.leftControl {
+  @apply bg-cover left-10;
+  background-image: url('public/cursor-left.png');
+}
+
+.rightControl {
+  @apply bg-cover right-10;
+  background-image: url('public/cursor-right.png');
+}
+
+@screen md {
+  .leftControl {
+    @apply left-6;
+  }
+
+  .rightControl {
+    @apply right-6;
+  }
+}
+
+.control {
+  @apply opacity-50 transition duration-150;
+}
+
+.root:hover .control {
+  @apply opacity-100;
+}
+
+.positionIndicatorsContainer {
+  /*@apply hidden;*/
+
+    @apply block absolute bottom-6 left-1/2;
+    transform: translateX(-50%);
+
+}
+
+.positionIndicator {
+  @apply rounded-full p-2;
+}
+
+.dot {
+  @apply bg-hover-1 transition w-3 h-3 rounded-full;
+}
+
+.positionIndicator:hover .dot {
+  @apply bg-hover-2;
+}
+
+.positionIndicator:focus {
+  @apply outline-none;
+}
+
+.positionIndicator:focus .dot {
+  @apply shadow-outline-normal;
+}
+
+.positionIndicatorActive .dot {
+  @apply bg-white;
+}
+
+.positionIndicatorActive:hover .dot {
+  @apply bg-white;
+}
+
+.imageContainer > div {
+    @apply h-full;
+}
+
+.img {
+  @apply w-full h-auto max-h-full object-cover;
+}

components/product/DesktopGallery/DesktopGallery.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react'
+import { ProductImage } from '@commerce/types'
+import { Gallery, Item } from 'react-photoswipe-gallery'
+import s from '@components/product/ProductSlider/ProductSlider.module.css'
+import Image from 'next/image'
+
+interface Props {
+  images: ProductImage[]
+}
+
+export const DesktopGallery: FC<Props> = ({ images }) => {
+  return (
+    <Gallery>
+      {images.map(({ url, alt }, index) => (
+        <Item original={url} width={1500} height={1500} key={url}>
+          {(props) => (
+            <div ref={props.ref as any}>
+              <Image
+                onClick={props.open}
+                className={s.img}
+                src={url!}
+                alt={alt || 'Product Image'}
+                width={800}
+                height={800}
+                priority={index === 0}
+                quality="85"
+              />
+            </div>
+          )}
+        </Item>
+      ))}
+    </Gallery>
+  )
+}

components/product/ProductGallery/ProductGallery.tsx

@@ -0,0 +1,56 @@
+import React, { FC, MutableRefObject, useEffect, useState } from 'react'
+
+import { ProductImage } from '@commerce/types'
+import 'photoswipe/dist/photoswipe.css'
+import 'photoswipe/dist/default-skin/default-skin.css'
+
+import { Gallery, Item } from 'react-photoswipe-gallery'
+import PhotoSwipe, { Options } from 'photoswipe'
+import Portal from '@reach/portal'
+
+interface Props {
+  images: ProductImage[]
+  selectedImageIndex?: number
+  isOpen?: boolean
+  onClose: (idx: number) => void
+}
+
+export const ProductGallery: FC<Props> = ({
+  images,
+  selectedImageIndex = 0,
+  isOpen,
+  onClose,
+}) => {
+  const [activeImage, setActiveImage] =
+    useState<MutableRefObject<HTMLElement>>()
+
+  useEffect(() => {
+    if (!!activeImage) {
+      activeImage.current.click()
+    }
+  }, [activeImage])
+
+  function addCloseListeners(photoswipe: PhotoSwipe<Options>) {
+    photoswipe.listen('destroy', () => onClose(photoswipe.getCurrentIndex()))
+    photoswipe.listen('close', () => onClose(photoswipe.getCurrentIndex()))
+  }
+
+  return (
+    <>
+      {isOpen && (
+        <Portal>
+          <Gallery onOpen={addCloseListeners}>
+            {images.map(({ url }, index) => (
+              <Item original={url} width={1500} height={1500} key={url}>
+                {({ ref, open }) => {
+                  if (index === selectedImageIndex) setActiveImage(ref)
+                  return <span ref={ref} onClick={open} />
+                }}
+              </Item>
+            ))}
+          </Gallery>
+        </Portal>
+      )}
+    </>
+  )
+}

components/product/ProductSlider/ProductSlider.module.css

@@ -1,4 +1,4 @@
-.root {
+.slider {
   @apply relative w-full h-full;
   overflow-y: hidden;
   cursor: pointer;
@@ -22,17 +22,19 @@
 .leftControl {
   @apply bg-cover left-10;
   background-image: url('public/cursor-left.png');
-
-  @screen md {
-    @apply left-6;
-  }
 }
 
 .rightControl {
   @apply bg-cover right-10;
   background-image: url('public/cursor-right.png');
+}
+
+@screen md {
+  .leftControl {
+    @apply left-6;
+  }
 
-  @screen md {
+  .rightControl {
     @apply right-6;
   }
 }
@@ -81,13 +83,8 @@
   @apply bg-white;
 }
 
-.imageContainer {
-& > div {
-    @apply h-full;
-& > div {
+.imageContainer > div {
     @apply h-full;
-  }
-}
 }
 
 .img {