feat: clsx

package.json

@@ -228,6 +228,7 @@
     "antd": "^5.22.2",
     "axios": "^1.7.8",
     "blueimp-md5": "^2.19.0",
+    "clsx": "^2.1.1",
     "cookies-js": "^1.2.3",
     "copy-to-clipboard": "^3.3.3",
     "cross-fetch": "^4.0.0",

src/components/hooks/useBodyScrollLock/index.js

@@ -0,0 +1,9 @@
+const useBodyScrollLock = () => {
+  React.useLayoutEffect(() => {
+    const originalStyle = window.getComputedStyle(document.body).overflow;
+    document.body.style.overflow = 'hidden';
+    return () => (document.body.style.overflow = originalStyle);
+  }, []);
+};
+
+export default useBodyScrollLock

src/components/hooks/useEventListener/index.js

@@ -0,0 +1,28 @@
+
+const useEventListener = (type, handler, el = window) => {
+  const savedHandler = React.useRef();
+
+  React.useEffect(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+
+  React.useEffect(() => {
+    const listener = e => savedHandler.current(e);
+
+    el.addEventListener(type, listener);
+
+    return () => {
+      el.removeEventListener(type, listener);
+    };
+  }, [type, el]);
+}
+
+export default useEventListener
+
+// const updateCoords = React.useCallback(
+//   ({ clientX, clientY }) => {
+//     setCoords({ x: clientX, y: clientY });
+//   },
+//   [setCoords]
+// );
+//  useEventListener('mousemove', updateCoords);

src/components/hooks/useKeyPress/index.jsx

@@ -0,0 +1,25 @@
+const useKeyPress = targetKey => {
+  const [keyPressed, setKeyPressed] = React.useState(false);
+
+  const downHandler = ({ key }) => {
+    if (key === targetKey) setKeyPressed(true);
+  };
+
+  const upHandler = ({ key }) => {
+    if (key === targetKey) setKeyPressed(false);
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', downHandler);
+    window.addEventListener('keyup', upHandler);
+
+    return () => {
+      window.removeEventListener('keydown', downHandler);
+      window.removeEventListener('keyup', upHandler);
+    };
+  }, []);
+
+  return keyPressed;
+};
+
+export default useKeyPress