feat: add mask crud

app/utils.ts

@@ -47,11 +47,18 @@ export function isIOS() {
   return /iphone|ipad|ipod/.test(userAgent);
 }
 
-export function useMobileScreen() {
-  const [isMobileScreen_, setIsMobileScreen] = useState(isMobileScreen());
+export function useWindowSize() {
+  const [size, setSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
   useEffect(() => {
     const onResize = () => {
-      setIsMobileScreen(isMobileScreen());
+      setSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
     };
 
     window.addEventListener("resize", onResize);
@@ -61,14 +68,21 @@ export function useMobileScreen() {
     };
   }, []);
 
-  return isMobileScreen_;
+  return size;
+}
+
+export const MOBILE_MAX_WIDTH = 600;
+export function useMobileScreen() {
+  const { width } = useWindowSize();
+
+  return width <= MOBILE_MAX_WIDTH;
 }
 
 export function isMobileScreen() {
   if (typeof window === "undefined") {
     return false;
   }
-  return window.innerWidth <= 600;
+  return window.innerWidth <= MOBILE_MAX_WIDTH;
 }
 
 export function isFirefox() {