From 1af168ddb4b147ef3e45189a635ccc11b36543bd Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Sun, 6 Oct 2024 17:33:43 +0200
Subject: [PATCH] window size hook

---
 src/App.tsx                      |  5 +++++
 src/hooks/useWindowDimensions.ts | 24 ++++++++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 src/hooks/useWindowDimensions.ts

diff --git a/src/App.tsx b/src/App.tsx
index b68c756..a6df8e3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -64,6 +64,9 @@ function App() {
     minHeight: "100%",
     aspectRatio: "16/9"
   }
+  function setMoviesHandler(movies: Movie[]) {
+  }
+
   return (
     <>
       <div id="background" className="-z-10 absolute">
@@ -72,8 +75,10 @@ function App() {
       <HamburgerMenu setConfig={setConfig} />
       <main className="flex justify-center gap-8">
         <Sidebar className="flex flex-col" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+        <Sidebar className="flex flex-col max-w-sm" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
         <MovieWall
           className="flex flex-wrap gap-2 max-w-6xl"
+          className="flex flex-wrap gap-2 max-w-5xl justify-center"
           movies={movies}
           setMovies={setMovies}
           config={config}
diff --git a/src/hooks/useWindowDimensions.ts b/src/hooks/useWindowDimensions.ts
new file mode 100644
index 0000000..dae3790
--- /dev/null
+++ b/src/hooks/useWindowDimensions.ts
@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+	const { innerWidth: width, innerHeight: height } = window;
+	return {
+		width,
+		height
+	};
+}
+
+export default function useWindowDimensions() {
+	const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+	useEffect(() => {
+		function handleResize() {
+			setWindowDimensions(getWindowDimensions());
+		}
+
+		window.addEventListener('resize', handleResize);
+		return () => window.removeEventListener('resize', handleResize);
+	}, []);
+
+	return windowDimensions;
+}