(feat): Add helper components

packages/components/src/custom/Helpers/Dimension/index.ts

@@ -0,0 +1 @@
+export { useWindowDimensions } from './windowSize';

packages/components/src/custom/Helpers/Dimension/windowSize.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Returns the width and height of the window.
+ *
+ * @returns {WindowDimensions} { width, height }
+ */
+function getWindowDimensions(): WindowDimensions {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+/**
+ * Custom hook for getting window dimensions.
+ *
+ * @returns {WindowDimensions} { width, height }
+ */
+export function useWindowDimensions(): WindowDimensions {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    let resizeTimeout: number;
+
+    function handleResize() {
+      if (resizeTimeout) {
+        clearTimeout(resizeTimeout);
+      }
+      resizeTimeout = window.setTimeout(() => {
+        setWindowDimensions(getWindowDimensions());
+      }, 500);
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    // Clean up the event listener on unmount
+    return () => {
+      window.removeEventListener('resize', handleResize);
+      if (resizeTimeout) {
+        clearTimeout(resizeTimeout);
+      }
+    };
+  }, []);
+
+  return windowDimensions;
+}
+
+/**
+ * Represents the width and height of the window.
+ */
+interface WindowDimensions {
+  width: number;
+  height: number;
+}

packages/components/src/custom/Helpers/readme.md

@@ -0,0 +1,29 @@
+# Helper Components
+
+This directory contains a collection of utility and helper components that you can use across your project. These components are designed to simplify common tasks, enhance reusability, and improve code organization.
+
+## Table of Contents
+
+- [Available Helper Components](#available-helper-components)
+- [How to Use](#how-to-use)
+- [Examples](#examples)
+
+## Available Helper Components
+
+1. **Window Dimensions Hook**: A custom React hook for tracking changes in window dimensions.
+
+   - **File**: `Dimension`
+   - **Usage**: Provides the `useWindowDimensions` hook, which allows you to get the current window dimensions and react to changes in window size.
+   - **Returns**: An object containing the current window dimensions and a boolean value indicating whether the window is currently in landscape mode.
+
+## How to Use
+
+To use these helper components in your project, follow these steps:
+
+1. Navigate to the specific helper component directory (e.g., `dimension.ts`) to find details about its usage.
+
+2. Import the required helper component into your code:
+
+   ```javascript
+   import { useWindowDimensions } from './helpers';
+   ```