Linted

src/components/Drawer.jsx

@@ -3,9 +3,9 @@ import clsx from "clsx";
 import PropTypes from "prop-types";
 import React, { Fragment } from "react";
 import { CloseIcon } from "../icons";
-import { Button } from "./Buttons/Button";
 import { isIosBrowser } from "../helpers/browser";
 import { useViewportHeight } from "../hooks/useViewportHeight";
+import { Button } from "./Buttons/Button";
 
 const sizes = {
     small: "w-72",
@@ -33,7 +33,12 @@ export const Drawer = ({
                 open={isOpen}
                 onClose={onClose}
             >
-                <div className={clsx("flex w-full", isIosBrowser ? `h-[${viewportHeight}px] max-h-[${viewportHeight}px]` : "h-screen")}>
+                <div
+                    className={clsx(
+                        "flex w-full",
+                        isIosBrowser ? `h-[${viewportHeight}px] max-h-[${viewportHeight}px]` : "h-screen",
+                    )}
+                >
                     <Transition.Child
                         as={Fragment}
                         enter="ease-in-out duration-500"

src/helpers/browser.js

@@ -2,15 +2,17 @@
 export const isOSX = typeof window === "undefined" ? false : window.navigator.userAgent.includes("Macintosh");
 
 export const isIosBrowser = () => {
-    if (typeof window === 'undefined' || !window.navigator) return false;
-
+    // eslint-disable-next-line no-undef
+    if (typeof window === "undefined" || !window.navigator) return false;
+
+    // eslint-disable-next-line no-undef
     const ua = window.navigator.userAgent;
-    const iOS = !!ua.match(/iPad/i) || !!ua.match(/iPhone/i);
-    const webkit = !!ua.match(/WebKit/i);
-  
+    const indexOS = !!/ipad/i.test(ua) || !!/iphone/i.test(ua);
+    const webkit = !!/webkit/i.test(ua);
+
     // Additional check for iPad with iOS 13+
-    const iPad = !!ua.match(/Macintosh/i) && navigator.maxTouchPoints > 1;
-
-    return (iOS && webkit) || iPad;
-  };
-  
+    // eslint-disable-next-line no-undef
+    const indexPad = !!/macintosh/i.test(ua) && navigator.maxTouchPoints > 1;
+
+    return (indexOS && webkit) || indexPad;
+};

src/hooks/useViewportHeight.js

@@ -1,24 +1,27 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 
 export const useViewportHeight = () => {
-  const [viewportHeight, setViewportHeight] = useState(0);
+    const [viewportHeight, setViewportHeight] = useState(0);
 
-  useEffect(() => {
-    const detectViewportHeight = () => {
-      // Use window.innerHeight for a more accurate viewport height
-      setViewportHeight(window.innerHeight);
-    };
+    useEffect(() => {
+        const detectViewportHeight = () => {
+            // Use window.innerHeight for a more accurate viewport height
+            // eslint-disable-next-line no-undef
+            setViewportHeight(window.innerHeight);
+        };
 
-    // Detect height on mount
-    detectViewportHeight();
+        // Detect height on mount
+        detectViewportHeight();
 
-    // Optional: Re-detect on orientation change for mobile devices
-    window.addEventListener('orientationchange', detectViewportHeight);
+        // Optional: Re-detect on orientation change for mobile devices
+        // eslint-disable-next-line no-undef
+        window.addEventListener("orientationchange", detectViewportHeight);
 
-    return () => {
-      window.removeEventListener('orientationchange', detectViewportHeight);
-    };
-  }, []);
+        return () => {
+            // eslint-disable-next-line no-undef
+            window.removeEventListener("orientationchange", detectViewportHeight);
+        };
+    }, []);
 
-  return viewportHeight;
-};
+    return viewportHeight;
+};