From 2e92417222ed9e657425120abcdfa1d1793e31ff Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sun, 18 Feb 2024 15:15:01 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(utils):=20add=20viewport=20uti?=
 =?UTF-8?q?ls?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../utils/viewport/ViewportProvider.tsx       | 21 +++++++++++++++++++
 src/components/utils/viewport/index.ts        |  3 +++
 src/components/utils/viewport/useViewport.ts  | 10 +++++++++
 .../utils/viewport/viewportContext.tsx        |  6 ++++++
 4 files changed, 40 insertions(+)
 create mode 100644 src/components/utils/viewport/ViewportProvider.tsx
 create mode 100644 src/components/utils/viewport/index.ts
 create mode 100644 src/components/utils/viewport/useViewport.ts
 create mode 100644 src/components/utils/viewport/viewportContext.tsx

diff --git a/src/components/utils/viewport/ViewportProvider.tsx b/src/components/utils/viewport/ViewportProvider.tsx
new file mode 100644
index 0000000..a456e3c
--- /dev/null
+++ b/src/components/utils/viewport/ViewportProvider.tsx
@@ -0,0 +1,21 @@
+import React from 'react'
+
+import viewportContext from './viewportContext'
+
+const ViewportProvider = (props: { children: React.ReactNode }) => {
+  const [width, setWidth] = React.useState(window.innerWidth)
+  const [height, setHeight] = React.useState(window.innerHeight)
+  const handleWindowResize = () => {
+    setWidth(window.innerWidth)
+    setHeight(window.innerHeight)
+  }
+
+  React.useEffect(() => {
+    window.addEventListener('resize', handleWindowResize)
+    return () => window.removeEventListener('resize', handleWindowResize)
+  }, [])
+
+  return <viewportContext.Provider value={{ width, height }}>{props.children}</viewportContext.Provider>
+}
+
+export default ViewportProvider
diff --git a/src/components/utils/viewport/index.ts b/src/components/utils/viewport/index.ts
new file mode 100644
index 0000000..e18c80f
--- /dev/null
+++ b/src/components/utils/viewport/index.ts
@@ -0,0 +1,3 @@
+export { default as viewportContext } from './viewportContext'
+export { default as ViewportProvider } from './ViewportProvider'
+export { default as useViewport } from './useViewport'
diff --git a/src/components/utils/viewport/useViewport.ts b/src/components/utils/viewport/useViewport.ts
new file mode 100644
index 0000000..5d9a0f1
--- /dev/null
+++ b/src/components/utils/viewport/useViewport.ts
@@ -0,0 +1,10 @@
+import React from 'react'
+
+import viewportContext from './viewportContext'
+
+const useViewport = () => {
+  const { width, height } = React.useContext(viewportContext)
+  return { width, height }
+}
+
+export default useViewport
diff --git a/src/components/utils/viewport/viewportContext.tsx b/src/components/utils/viewport/viewportContext.tsx
new file mode 100644
index 0000000..b77bd6f
--- /dev/null
+++ b/src/components/utils/viewport/viewportContext.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+
+type Viewport = { width: number; height: number }
+const viewportContext = React.createContext<Viewport>({ width: window.innerWidth, height: window.innerHeight })
+
+export default viewportContext