package.json

@@ -22,12 +22,9 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "postcss": "^8.4.47",
-    "tailwindcss": "^3.4.13",
     "typescript": "^5.2.2",
     "vite": "^5.2.0"
   }

postcss.config.js

@@ -1,6 +0,0 @@
-export default {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}

src/App.css

@@ -0,0 +1,213 @@
+:root {
+
+  --poster-width: 15rem;
+  --posters-wide: 10;
+  --posters-gap: 1rem;
+}
+
+#root {
+  height: 100%;
+  width: 100%;
+}
+
+@font-face {
+  font-family: "Jura";
+  src: url("fonts/Jura-VariableFont_wght.ttf");
+}
+
+@font-face {
+  font-family: "RobotoBold";
+  src: url("fonts/Roboto-Bold.ttf")
+}
+
+body {
+
+  font-family: Jura;
+  color: white;
+}
+
+
+main {
+  height: 100%;
+  display: flex;
+  gap: 1em;
+  justify-content: center;
+  align-items: center;
+}
+
+
+
+#movie-wall-container {
+  display: inline-flex;
+  flex-wrap: wrap;
+  flex-basis: 60%;
+  align-items: center;
+  gap: 1em;
+  height: fit-content;
+}
+
+
+#sidebar {
+  flex-basis: 20%;
+  max-height: 100%;
+  min-height: 100%;
+  font-size: 1.6rem;
+  text-align: center;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  display: grid;
+  grid-template-rows: 1fr 1fr 2fr 1fr;
+  align-items: center;
+  justify-content: center;
+
+  h1 {
+    font-size: 1.2em;
+    font-family: RobotoBold;
+    grid-row: 1/ span 1;
+    height: fit-content;
+    overflow: hidden;
+
+  }
+
+  a {
+    display: contents;
+  }
+
+
+  .chosen-movie-poster {
+    grid-row: 2/ span 1;
+    object-fit: cover;
+    display: flex;
+    justify-content: center;
+  }
+
+
+  #summary {
+    overflow: scroll;
+    max-height: 100%;
+    grid-row: 3/ span 1;
+  }
+
+  p {
+    font-family: Jura;
+    padding: 0.2em;
+    margin: 0.1em 0.2em 0.1em 0.2em;
+  }
+
+  footer {
+    font-size: 1.2rem;
+    grid-row: 4/ span 1;
+    overflow: hidden;
+  }
+
+}
+
+.poster {
+  width: var(--poster-width);
+  display: grid;
+  box-shadow: 1em 1em 1em rgba(0, 0, 0, 0.5);
+  border-radius: 1em;
+  overflow: hidden;
+
+  img {
+    height: 100%;
+    animation: fadeImage 0.5s;
+    animation-fill-mode: forwards;
+    aspect-ratio: 2/3;
+  }
+}
+
+.poster>* {
+  grid-area: 1/1;
+}
+
+.highlighted {
+  border: 0.1em solid gold;
+}
+
+
+.overlay {
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  z-index: 2;
+  opacity: 0;
+}
+
+.highlighted>.overlay {
+  background-color: rgba(255, 222, 123, 0.5);
+}
+
+.overlay:hover {
+  opacity: 1;
+}
+
+@keyframes fadeImage {
+  from {
+    filter: blur(5rem);
+  }
+
+  to {
+    filter: blur(0);
+  }
+}
+
+
+#background {
+  background-color: black;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+
+}
+
+.CrossfadeImage {
+  width: 100%;
+  height: 100%;
+  filter: blur(1rem) brightness(0.4);
+}
+
+#watch-providers-container {
+  max-width: 100%;
+  display: flex;
+  gap: 0.2rem;
+  justify-content: space-around;
+
+  .watch-providers {
+    text-align: center;
+    border: 1rem white;
+
+    h1 {
+      font-size: 1.4rem;
+    }
+
+  }
+
+  .watch-logos-container {
+    display: flex;
+    flex-wrap: nowrap;
+    gap: 0.4rem;
+    justify-content: center;
+
+
+    .watch-logo {
+      aspect-ratio: 1/1;
+      max-height: 2rem;
+
+      img {
+        width: 100%;
+      }
+    }
+
+  }
+}
+
+#hamburger {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: 10;
+}

src/App.tsx

@@ -1,13 +1,14 @@
+import './defaults.css'
+import './App.css'
 import './spinner.css'
 import { MovieWall } from './objects/movie-wall'
 import { HamburgerMenu } from './objects/HamburgerMenu'
-import { useState, useEffect, useRef, useLayoutEffect } from 'react'
+import { useState, useEffect } from 'react'
 import tmdb from './objects/tmdb'
 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,
@@ -61,50 +62,27 @@ function App() {
     tmdb.getSimilar(config, chosenMovie, setMovies, setSimilarMoviesAvailable)
   }, [config])
   const crossfadeImageStyles = {
-    width: "100vw",
+    width: "2560px",
-    height: "100vh",
+    minHeight: "100%",
-    aspectRatio: "16/9",
+    aspectRatio: "16/9"
-    objectFit: "clip",
   }
-
-  const { width } = useWindowDimensions()
-
-
-  function trimMoviesForScreen(movies: Movie[]) {
-    let desiredLength = 0
-    if (width > 1280) {
-      desiredLength = 18
-    } else if (width > 640) {
-      desiredLength = 16
-    } else { desiredLength = 15 }
-    //ensure movies.length is a multiple of 6 (so it makes an orphanless grid)
-    while (movies.length < desiredLength && movies.length >= 6) { desiredLength = desiredLength - 6 }
-    return movies.slice(0, desiredLength)
-  }
-
   return (
     <>
-
+      <div id="background">
-      <div className="w-screen h-screen flex flex-col absolute overflow-hidden">
+        <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
-        <div className="-z-10 bg-black/20 w-full h-full absolute"></div>
+      </div>
-        <div className="-z-20 absolute h-full blur-xl bg-black">
+      <main >
-          <CrossfadeImage src={backdrop} style={crossfadeImageStyles} />
+        <HamburgerMenu setConfig={setConfig} />
-        </div>
+        <Sidebar movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
-        <header className="bg-black py-2">
+        <div id="movie-wall-container">
-          <HamburgerMenu setConfig={setConfig} />
+          <MovieWall movies={movies}
-        </header>
-        <main className="flex flex-col sm:flex-row sm:justify-center items-center gap-8 grow">
-          <Sidebar className="flex flex-col justify-between items-center max-w-sm bg-black/80 text-white w-full sm:w-96 h-64 sm:h-full" movie={chosenMovie} similarMoviesAvailable={similarMoviesAvailable} watchProviders={watchProviders} config={config} />
-          <MovieWall
-            className={"flex flex-wrap gap-2 w-fit justify-center sm:max-w-lg xl:max-w-5xl "}
-            movies={trimMoviesForScreen(movies)}
             setMovies={setMovies}
             config={config}
             setChosenMovie={setChosenMovie}
             setSimilarMoviesAvailable={setSimilarMoviesAvailable}
           />
-        </main>
+        </div>
-      </div>
+      </main>
     </>
   )
 }

src/defaults.css

@@ -0,0 +1,69 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+img {
+	display: block;
+	max-width: 100%;
+}
+
+menu:not(article menu),
+ol:not(article ol),
+ul:not(article ul) {
+	list-style: none;
+}
+
+menu,
+ol,
+ul {
+	padding-left: 0;
+}
+
+article ol,
+article ul {
+	list-style-position: inside;
+}
+
+a {
+	/* Places underlines below the descenders */
+	text-underline-position: under;
+
+
+	/* Sets the thickness as a percentage of the font size */
+	text-decoration-thickness: 8;
+}
+
+/* <html> = the root */
+html {
+	font-size: 62.5%;
+	/* (62.5/100) * 16px = 10px */
+	-webkit-text-size-adjust: none;
+	/* for iOS Safari */
+	text-size-adjust: none;
+	/* for other mobile browsers */
+	height: 100vh;
+}
+
+body {
+	margin: 0;
+	height: 100%;
+
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	html {
+		scroll-behavior: smooth;
+	}
+}
+
+label,
+button,
+select,
+summary,
+[type=radio],
+[type=submit],
+[type=checkbox] {
+	cursor: pointer;
+}

src/hooks/useWindowDimensions.ts

@@ -1,25 +0,0 @@
-import { useState, useEffect, useRef } 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/index.css

@@ -1,25 +1,73 @@
-@tailwind base;
+:root {
-@tailwind components;
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-@tailwind utilities;
+  line-height: 1.5;
+  font-weight: 400;
 
-/* width */
+  color-scheme: light dark;
-::-webkit-scrollbar {
+  color: rgba(255, 255, 255, 0.87);
-	width: 10px;
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
-/* Track */
+a {
-::-webkit-scrollbar-track {
+  font-weight: 500;
-	background: #111;
+  color: #646cff;
-	border-radius: 5px;
+  text-decoration: inherit;
 }
 
-/* Handle */
+a:hover {
-::-webkit-scrollbar-thumb {
+  color: #535bf2;
-	background: #444;
-	border-radius: 5px;
 }
 
-/* Handle on hover */
+body {
-::-webkit-scrollbar-thumb:hover {
+  margin: 0;
-	background: #555;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
 }

src/objects/HamburgerMenu.tsx

@@ -3,7 +3,7 @@ export interface HamburgerMenuProps extends React.ComponentPropsWithRef<"div"> {
   setConfig: Function;
 }
 
-export function HamburgerMenu({ setConfig, className }: HamburgerMenuProps) {
+export function HamburgerMenu({ setConfig }: HamburgerMenuProps) {
   const languages = [
     {
       value: "es",
@@ -41,7 +41,7 @@ export function HamburgerMenu({ setConfig, className }: HamburgerMenuProps) {
   //     }
   //   })
   // }
-  return <div id="hamburger" className={className}>
+  return <div id="hamburger">
     <select onChange={handleLangChange}>
       {languages.map((language) => <option value={language.value} key={language.value}>{language.label}</option>)}
     </select>

src/objects/movie-wall.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from "react"
+import React, { useState } from "react"
 import { Config } from "../App"
 import tmdb from "./tmdb"
 
@@ -35,20 +35,16 @@ interface MovieWallProps extends React.ComponentPropsWithRef<"div"> {
   setChosenMovie: React.Dispatch<React.SetStateAction<any>>;
   setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   config: Config;
-  className: string;
 }
 
-export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable, className }: MovieWallProps) {
+export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimilarMoviesAvailable }: MovieWallProps) {
-
 
   const posters: React.ReactElement[] = []
   for (let i = 0; i < movies.length; i++) {
     const movie = movies[i]
     const isHighlighted = movie.vote_average ? movie.vote_average > 6 : false
-
-    const borderColor = isHighlighted ? "border-orange-300" : "border-gray-300"
     posters.push(
-      <Poster className={"w-16 sm:w-28 xl:w-36 aspect-poster rounded-xl border-2 overflow-hidden relative " + borderColor} isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
+      <Poster isHighlighted={isHighlighted} movie={movie} key={movie.id} index={i}
         listSimilar={tmdb.getSimilar}
         config={config}
         setMovies={setMovies}
@@ -56,9 +52,9 @@ export function MovieWall({ movies, setMovies, config, setChosenMovie, setSimila
         setSimilarMoviesAvailable={setSimilarMoviesAvailable} />
     )
   }
-  return <div className={className}>
+  return <>
     {posters}
-  </div>
+  </>
 }
 
 interface PosterProps extends React.ComponentPropsWithRef<"div"> {
@@ -70,31 +66,34 @@ interface PosterProps extends React.ComponentPropsWithRef<"div"> {
   setChosenMovie: React.Dispatch<React.SetStateAction<Movie>>;
   setSimilarMoviesAvailable: React.Dispatch<React.SetStateAction<boolean>>;
   isHighlighted: boolean;
-  className: string
 }
 
 
-function Poster({ className, movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
+function Poster({ movie, config, listSimilar, setMovies, setChosenMovie, setSimilarMoviesAvailable, isHighlighted }: PosterProps) {
   function clickHandler() {
     setChosenMovie(movie)
     listSimilar(config, movie, setMovies, setSimilarMoviesAvailable)
   }
   const [isLoading, setIsLoading] = useState(true)
   const [hasError, setHasError] = useState(false)
-  return <><div className={className} >
+  const classes = [
+    "poster",
+    isHighlighted ? "highlighted" : ""
+  ].join(" ")
+  return <><div className={classes} >
     {isLoading ?
-      <div className="m-auto text-center h-fit w-fit">
+      <div className="spinner-container">
-        <div className="lds-spinner align-middle"><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="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 hover:bg-white/40" onClick={() => clickHandler()}></div>
+      : <div className="overlay" onClick={() => clickHandler()}>
+      </div>
     }
-    {hasError ?? <div className="m-auto text-center">⚠️</div>}
+    {hasError ?? <div className="spinner-container">⚠️</div>}
     <img
-      className="animate-blur object-cover w-full aspect-poster"
       src={tmdb.makeImgUrl(movie.poster_path ?? "")}
       onLoad={() => setIsLoading(false)}
       onError={() => setHasError(true)}
     />
-  </div >
+  </div>
   </>
 }
 

src/objects/sidebar.tsx

@@ -10,40 +10,25 @@ export interface SidebarProps extends React.ComponentPropsWithRef<"div"> {
   similarMoviesAvailable: boolean;
   watchProviders: WatchProviders;
   config: Config;
-  className: string
 }
-export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config, className }: SidebarProps) {
+export function Sidebar({ movie, similarMoviesAvailable, watchProviders, config }: SidebarProps) {
   const apology = config.language == "es" ?
     "Resumen no disponible" :
     config.language == "en" ?
       "Summary unavailable." :
       ""
-  return <div id="sidebar" className={className}>
+  return <div id="sidebar">
-    <div className="sm:h-14 w-fit flex justify-center items-center">
+    <h1>{movie?.title ?? "loading"}</h1>
-      <h1 className="font-bold text-base sm:text-lg sm:text-wrap my-1 sm:my-4 overflow-hidden text-center text-balance">{movie?.title ?? "loading"}</h1>
+    <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer">
-    </div>
+      <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} containerClass="chosen-movie-poster" style={{ objectFit: "cover", height: "100%" }} />
-    <div className="flex flex-row sm:flex-col gap-2 justify-center sm:items-center">
+    </a>
-      <a href={tmdb.makeMovieLink(movie)} target="_blank" rel="noopener noreferrer" className="h-32 sm:h-96 aspect-poster flex justify-center">
+    {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-        <CrossfadeImage src={tmdb.makeImgUrl(movie.poster_path ?? "")} style={{
+    <p id="summary">{movie.overview === null ? "Loading"
-          objectFit: "clip",
+      : movie.overview === "" ? apology
-          height: "100%",
+        : movie.overview}
-          apectRatio: "2 / 3"
+    </p>
-        }} />
+    <WhereToWatch watchProviders={watchProviders} config={config} />
-      </a>
+  </div>
-      {similarMoviesAvailable ? "" : "No hay data suficiente para darte pelílculas relacionadas."}
-      <div className="h-32 sm:h-72 w-64 sm:w-full overflow-y-scroll overflow-x-hidden sm:mt-4 p-2 sm:p-4 text-sm sm:text-base flex justify-center items-center border-2 border-slate-800 rounded-lg ">
-        {/* TODO: make the apology vertically centered */}
-        {movie.overview === null ?
-          <p>Loading...</p>
-          : movie.overview === "" ?
-            <p>{apology}</p>
-            :
-            <p className="self-start">{movie.overview}</p>
-        }
-      </div>
-    </div>
-    <WhereToWatch watchProviders={watchProviders} config={config} className="w-full h-16 sm:h-32 flex flex-col justify-center mb-1 sm:mb-4 text-xs sm:text-base" />
-  </div >
 
 
 }

src/objects/tmdb.tsx

@@ -28,32 +28,26 @@ export default {
 * @returns {boolean}
 */
   getPopular: async function({ language, region, page }: Config, callback: Function) {
-    try {
+    let res = await tmdb.get('/popular',
-      let res = await tmdb.get('/popular',
+      {
-        {
+        params: {
-          params: {
+          language,
-            language,
+          region,
-            region,
+          page
-            page
+        }
-          }
+      })
-        })
+    if (res.status === 200) {
-      console.log("POPULAR MOVIES: " + JSON.stringify(res))
+      res = res.data.results
-      if (res.status === 200) {
+      callback(res)
-        res = res.data.results
+      return true
-        callback(res)
+    } else {
-        return true
+      throw Error("API call failed! Response: " + JSON.stringify(res))
-      } else {
-        throw Error("API call failed! Response: " + JSON.stringify(res))
-      }
-    } catch (error) {
-      console.error(error)
     }
   },
   /**
    * Calls TMDB/similar, then fires the callback with res.data.results.unshift(movie) as argument
    */
   getSimilar: async function({ language, page }: Config, movie: Movie, setMovies: Function, setSimilarMoviesAvailable: Function) {
-
     let res = await tmdb.get(movie.id + '/similar', {
       params: {
         language,

src/objects/whereToWatch.tsx

@@ -63,12 +63,12 @@ interface ProviderIconsProps extends React.ComponentPropsWithRef<"div"> {
 }
 function ProviderIcons({ providerList, link }: ProviderIconsProps) {
   const list = providerList.map((e: any, i: number) => {
-    return <div className="w-6 aspect-square">
+    return <div className="watch-logo">
       <a href={link}>
         <img src={tmdb.makeLogoPath(e.logo_path)} key={e.provider_id + "_" + i} /></a>
     </div>
   })
-  return <div id="logos-container" className="w-full flex">
+  return <div className="watch-logos-container">
     {list}
   </div>
 }
@@ -76,19 +76,22 @@ function watchProvidersExist(watchProviders: any) {
   return watchProviders?.link
 
 }
-export function WhereToWatch({ watchProviders, config, className }: WhereToWatchProps) {
+export function WhereToWatch({ watchProviders, config }: WhereToWatchProps) {
-  return <><footer className={className}>
+  console.log("Watch providers exist?" + watchProvidersExist(watchProviders))
-    {watchProvidersExist(watchProviders) ?
+  if (!watchProvidersExist(watchProviders)) {
-      <>
+    console.group()
-        <div className="flex w-full justify-around">
+    console.log("Watch providers (WhereToWatch)")
-          {watchProviders?.flatrate?.length > 0 ? <div className=""><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
+    console.log(watchProviders)
-          {watchProviders?.rent?.length > 0 ? <div className=""><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
+    console.groupEnd()
-          {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
+    return <p>{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
-        </div>
+  }
-        <p className="w-fit mx-auto mt-1 sm:mt-4">Powered by Just Watch.</p>
+  return <><footer id="sidebar-footer">
-      </> :
+    <div id="watch-providers-container">
-      <p className="w-fit mx-auto">{config.language == "es" ? "Por el momento no hay opciónes streaming." : config.language == "en" ? "There are no online viewing options right now." : ""}</p>
+      {watchProviders?.flatrate?.length > 0 ? <div className="watch-providers"><h1>Streaming:</h1><ProviderIcons providerList={watchProviders.flatrate} link={watchProviders.link} /></div> : ""}
-    }
+      {watchProviders?.rent?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Alquiler:" : config.language == "en" ? "To Rent:" : ""}</h1><ProviderIcons providerList={watchProviders.rent} link={watchProviders.link} /></div> : ""}
-  </footer >
+      {watchProviders?.buy?.length > 0 ? <div className="watch-providers"><h1>{config.language == "es" ? "Comprar:" : config.language == "en" ? "To Buy:" : ""}</h1><ProviderIcons providerList={watchProviders.buy} link={watchProviders.link} /></div> : ""}
+    </div>
+    <p>Powered by Just Watch.</p>
+  </footer>
   </>
 }

src/spinner.css

@@ -1,13 +1,3 @@
-/* .overlay { */
-/*   margin: 0; */
-/*   height: 100%; */
-/*   width: 100%; */
-/*   background-color: rgba(255, 255, 255, 0.5); */
-/*   cursor: pointer; */
-/*   z-index: 2; */
-/*   opacity: 0; */
-/* } */
-/**/
 .spinner-container {
 	margin: auto;
 	text-align: center;

tailwind.config.js

@@ -1,21 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./dist/index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  theme: {
-    extend: {
-      aspectRatio: {
-        poster: "2 / 3",
-      },
-      keyframes: {
-        blur: {
-          "0%": { filter: "blur(10px)" },
-          "100%": { filter: "blur(0px)" },
-        },
-      },
-      animation: {
-        blur: "blur 0.5s linear",
-      },
-    },
-  },
-  plugins: [],
-};