–💄 put movies into table

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>
     </>
   )
 }