Changes

components/product/ProductSlider/ProductSlider.module.css

@@ -0,0 +1,17 @@
+.root {
+  @apply relative w-full h-full;
+}
+
+.rootPanel {
+  @apply absolute flex flex-row inset-0 z-20 overflow-hidden;
+}
+
+.leftPanel {
+  @apply flex-1;
+  cursor: url('/cursor-left.png'), auto;
+}
+
+.rightPanel {
+  @apply flex-1;
+  cursor: url('/cursor-right.png'), auto;
+}

components/product/ProductSlider/ProductSlider.tsx

@@ -1,7 +1,6 @@
-import { FC, useState } from 'react'
+import React, { FC, useState } from 'react'
-import React from 'react'
 import SwipeableViews from 'react-swipeable-views'
-
+import s from './ProductSlider.module.css'
 interface Props {
   children?: any
 }
@@ -19,10 +18,10 @@ const ProductSlider: FC<Props> = ({ children }) => {
   }
 
   return (
-    <div className="relative w-full h-full">
+    <div className={s.root}>
-      <div className="absolute flex flex-row inset-0 z-10 opacity-0">
+      <div className={s.rootPanel}>
-        <div className="flex-1 bg-cyan" onClick={goBack}></div>
+        <div className={s.leftPanel} onClick={goBack}></div>
-        <div className="flex-1 bg-pink" onClick={goNext}></div>
+        <div className={s.rightPanel} onClick={goNext}></div>
       </div>
       <SwipeableViews index={idx} onChangeIndex={setIdx}>
         {children}

components/product/ProductView/ProductView.tsx

@@ -1,5 +1,5 @@
 import { NextSeo } from 'next-seo'
-import { FC, useState } from 'react'
+import { FC, useState, useEffect } from 'react'
 import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
 import { useUI } from '@components/ui/context'
 import { Button, Container } from '@components/ui'
@@ -7,7 +7,7 @@ import { Swatch, ProductSlider } from '@components/product'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { getProductOptions } from '../helpers'
 import s from './ProductView.module.css'
-
+import * as Bowser from 'bowser'
 interface Props {
   className?: string
   children?: any
@@ -18,6 +18,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
   const addItem = useAddItem()
   const { openSidebar } = useUI()
   const options = getProductOptions(product)
+  let notValidBrowser = null
 
   const [choices, setChoices] = useState<Record<string, any>>({
     size: null,
@@ -26,6 +27,16 @@ const ProductView: FC<Props> = ({ product, className }) => {
 
   const [loading, setLoading] = useState(false)
 
+  useEffect(() => {
+    const browser = Bowser.getParser(window.navigator.userAgent)
+    const notValidBrowser = browser.satisfies({
+      mobile: {
+        safari: '>=14',
+        android: '>81',
+      },
+    })
+  }, [notValidBrowser])
+
   const addToCart = async () => {
     setLoading(true)
     try {
@@ -85,9 +96,13 @@ const ProductView: FC<Props> = ({ product, className }) => {
               ))}
             </ProductSlider>
           </div>
+
+          {notValidBrowser && (
             <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
               <img src="/slider-arrows.png" />
             </div>
+          )}
+
           <div className={s.squareBg}></div>
         </div>
 

package.json

@@ -22,18 +22,15 @@
     "@headlessui/react": "^0.2.0",
     "@tailwindcss/ui": "^0.6.2",
     "animate.css": "^4.1.1",
+    "bowser": "^2.11.0",
     "bunyan": "^1.8.14",
     "bunyan-prettystream": "^0.1.3",
     "classnames": "^2.2.6",
     "cookie": "^0.4.1",
     "js-cookie": "^2.2.1",
     "lodash.debounce": "^4.0.8",
-<<<<<<< HEAD
-    "next": "^9.5.5",
-=======
     "lodash.random": "^3.2.0",
     "next": "^9.5.6-canary.4",
->>>>>>> 0922c87621a6a34986bf811a1f2e55ed0bc7edf4
     "next-seo": "^4.11.0",
     "next-themes": "^0.0.4",
     "nextjs-progressbar": "^0.0.6",