feat: ✨ add useGetScreenWidth hook (#112)

* feature: ✨ add useGetScreenWidth hook

* fix: 🐛 get window width in server-side

client/src/app/page.tsx

@@ -1,14 +1,19 @@
 'use client';
 
 import { Typography } from '@/shared/ui';
+import { useGetScreenWidth } from '@/shared/lib';
 
 export default function Home() {
+  const width = useGetScreenWidth();
+
   return (
     <>
       <Typography size='heading_l' variant='h6'>
         We are working hard to deliver teameights on NextJS/TS soon!
       </Typography>
 
+      <div> The screen width is: {width} </div>
+
       <a href='/login' style={{ color: 'green' }}>
         Get to login
       </a>

client/src/shared/lib/hooks/index.ts

@@ -1 +1,2 @@
 export { useClickOutside } from './use-click-outside/use-click-outside';
+export { useGetScreenWidth } from './use-get-screen-width/use-get-screen-width';

client/src/shared/lib/hooks/use-get-screen-width/use-get-screen-width.ts

@@ -0,0 +1,47 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Custom hook to get the current screen width.
+ *
+ * This hook returns the current screen width, and will re-render the component
+ * using this hook whenever the screen is resized.
+ *
+ * @returns {number} The current screen width in pixels.
+ *
+ * @example
+ * import { useGetScreenWidth } from '@/shared/lib';
+ *
+ * export const ResponsiveComponent = () => {
+ *   const screenWidth = useGetScreenWidth();
+ *
+ *   return (
+ *     <div>
+ *       The screen width is: {screenWidth}
+ *     </div>
+ *   );
+ * };
+ */
+export const useGetScreenWidth = (): number => {
+  const [screenWidth, setScreenWidth] = useState<number>(0);
+
+  useEffect(() => {
+    // Set the screen width on the client-side after the component has mounted
+    setScreenWidth(window.innerWidth);
+
+    const handleResize = () => {
+      setScreenWidth(window.innerWidth);
+    };
+
+    // Event listener for window resize
+    window.addEventListener('resize', handleResize);
+
+    // Clean up the event listener on component unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return screenWidth;
+};