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 from 'react'
+import React, { FC, useState } 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="absolute flex flex-row inset-0 z-10 opacity-0">
-        <div className="flex-1 bg-cyan" onClick={goBack}></div>
-        <div className="flex-1 bg-pink" onClick={goNext}></div>
+    <div className={s.root}>
+      <div className={s.rootPanel}>
+        <div className={s.leftPanel} onClick={goBack}></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>
-          <div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
-            <img src="/slider-arrows.png" />
-          </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>