src/App.tsx

@@ -7,7 +7,6 @@ import { Sidebar } from './objects/sidebar'
 import { Movie } from './objects/movie-wall'
 import CrossfadeImage from 'react-crossfade-image'
 import { WatchProviders } from './objects/whereToWatch'
-import useWindowDimensions from './hooks/useWindowDimensions'
 
 export type Config = {
   language: string,
@@ -65,24 +64,16 @@ function App() {
     minHeight: "100%",
     aspectRatio: "16/9"
   }
-
-  const { width } = useWindowDimensions()
-
-  function setMoviesHandler(movies: Movie[]) {
-
-  }
-
   return (
     <>
       <div id="background" className="-z-10 absolute">
         <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
       </div>
       <HamburgerMenu setConfig={setConfig} />
-      <main className="flex justify-center items-center gap-8">
-        WIDTH: {width}
-        <Sidebar className="flex flex-col max-w-sm" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
+      <main className="flex justify-center gap-8">
+        <Sidebar className="flex flex-col" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
         <MovieWall
-          className="flex flex-wrap gap-2 max-w-5xl justify-center"
+          className="flex flex-wrap gap-2 max-w-6xl"
           movies={movies}
           setMovies={setMovies}
           config={config}

src/hooks/useWindowDimensions.ts

@@ -1,24 +0,0 @@
-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;
-}

src/objects/movie-wall.tsx

@@ -82,7 +82,9 @@ function Poster({ className, movie, config, listSimilar, setMovies, setChosenMov
     {isLoading ?
       <div className="m-auto text-center h-full w-full fixed">
         <div className="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
-      : <div className="z-10 h-full w-full absolute cursor-pointer" onClick={() => clickHandler()}></div>
+      : <div className="z-10 h-full w-full absolute cursor-pointer" onClick={() => clickHandler()}>
+        hello
+      </div>
     }
     {hasError ?? <div className="m-auto text-center">⚠️</div>}
     <img

src/objects/sidebar.tsx

@@ -24,7 +24,7 @@ export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config,
       <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" style={{ objectFit: "cover", height: "100%" }} />
     </a>
     {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-    <p id="summary" className="">{movie.overview === null ? "Loading"
+    <p id="summary">{movie.overview === null ? "Loading"
       : movie.overview === "" ? apology
         : movie.overview}
     </p>