–💄 put movies into table

src/App.css

@@ -1,42 +1,9 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+:root {
+  --bg: #27374d;
+  --text-1: #dde6ed;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+html {
+  background-color: var(--bg);
+  color: var(--text-1);
 }

src/App.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from 'react'
 import './App.css'
+import q from 'qjuul'
 
 function App() {
-  const API_MOVIE_KEY = import.meta.env.VITE_MOVIE_API_KEY
+  const API_MOVIE_KEY = 'd92949d8'
   const [movies, setMovies] = useState([])
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
-    fetch(`http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=batman`)
+    fetch(`http://www.omdbapi.com/?apikey=${API_MOVIE_KEY}&s=spider-man`)
       .then((response) => response.json())
       .then((data) => {
         setMovies(data.Search)
@@ -18,20 +19,33 @@ function App() {
 
   return (
     <>
-      <div>
+      <q.div>
+        <div>
+          <h1>All movies</h1>
+        </div>
         {!loading && movies ? (
           <div>
-            {movies.map((movie: any) => (
-              <div>
-                <h1>{movie.Title}</h1>
-                <img src={movie.Poster} alt={movie.Title} />
-              </div>
-            ))}
+            <table>
+              <tr>
+                <th>Poster</th>
+                <th>Title</th>
+                <th>Year</th>
+              </tr>
+              {movies.map((movie: any) => (
+                <tr>
+                  <td>
+                    <img src={movie.Poster} alt={movie.Title} width="100" />
+                  </td>
+                  <td>{movie.Title}</td>
+                  <td>{movie.Year}</td>
+                </tr>
+              ))}
+            </table>
           </div>
         ) : (
           <h1>Loading...</h1>
         )}
-      </div>
+      </q.div>
     </>
   )
 }

src/index.css

@@ -1,69 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  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;
-  }
-}