feat: add media type queries, pagination will be added in a future co…

…mmits
pirateIV · Aug 9, 2024 · 7390752 · 7390752
1 parent 70caa6b
commit 7390752
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 54 deletions.
diff --git a/index.html b/index.html
@@ -9,6 +9,10 @@
             content="Movie app with TMDB API, access to vast collection of movies and so much more..."
         />
         <meta name="description" content="Author: Benjamin Abolade" />
+        <link
+            rel="stylesheet"
+            href="https://movies.nuxt.space/_nuxt/entry.B_5N0RSL.css"
+        />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
         <link

diff --git a/src/components/media/AutoLoadGrid.jsx b/src/components/media/AutoLoadGrid.jsx
@@ -2,12 +2,17 @@ import MediaCard from "./Card";
 
 const MediaAutoLoadGrid = ({ type, media, children }) => {
     return (
-        <div className="p-10">
-            <h1 className="flex gap-2 text-3xl">{children}</h1>
+        <div className="p-4 sm:p-6 md:p-8 lg:p-10">
+            <h1 className="flex gap-2 text-2xl sm:text-3xl">{children}</h1>
 
-            <div className="grid grid-cols-5 mt-5">
+            <div className="grid gap-4 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 mt-6 sm:mt-8 lg:mt-10">
                 {media?.map((setItem) => (
-                    <MediaCard item={setItem} query={{ type }} />
+                    <MediaCard
+                        key={setItem.id}
+                        item={setItem}
+                        query={{ type }}
+                        customclass="media-card"
+                    />
                 ))}
             </div>
         </div>

diff --git a/src/components/media/Card.jsx b/src/components/media/Card.jsx
@@ -15,11 +15,11 @@ const params = {
     q: 100,
 };
 
-const MediaCard = ({ item, query }) => {
+const MediaCard = ({ item, query, customclass }) => {
     return (
         <Link
             to={`/${query.type}/${item?.id}`}
-            className="pb-2 flex-1 w-40 md:w-60"
+            className={` ${customclass} pb-2 flex-1 w-40 md:w-60`}
         >
             <div className="block aspect-[10/16] p-1 bg-[#9ca3af1a] duration-300 hover:scale-105">
                 {item?.poster_path ? (

diff --git a/src/index.css b/src/index.css
@@ -3,65 +3,105 @@
 @tailwind utilities;
 
 @layer reset {
-  [h-100vh] {
-    height: 100vh;
-  }
+    [h-100vh] {
+        height: 100vh;
+    }
 }
 
 @layer base {
-  #hero-info {
-    background-image: linear-gradient(to top,
-        rgb(0 0 0 / 1) 0%,
-        rgb(0 0 0 / 1) 50%,
-        transparent 100%);
-  }
-
-  @media (min-width: 1024px) {
     #hero-info {
-      background-image: linear-gradient(to right,
-          rgb(0 0 0 / 1) 0%,
-          rgb(0 0 0 / 1) 50%,
-          transparent 100%);
+        background-image: linear-gradient(to top,
+                rgb(0 0 0 / 1) 0%,
+                rgb(0 0 0 / 1) 50%,
+                transparent 100%);
+    }
+
+    @media (min-width: 1024px) {
+        #hero-info {
+            background-image: linear-gradient(to right,
+                    rgb(0 0 0 / 1) 0%,
+                    rgb(0 0 0 / 1) 50%,
+                    transparent 100%);
+        }
     }
-  }
-
-  .slide-top {
-    -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-    -webkit-animation-delay: 0.5s;
-    animation-delay: 0.5s;
-  }
-
-  @-webkit-keyframes slide-top {
-    0% {
-      -webkit-transform: translateY(60px);
-      opacity: 0;
+
+    .slide-top {
+        -webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+        -webkit-animation-delay: 0.25s;
+        animation-delay: 0.25s;
+    }
+
+    @-webkit-keyframes slide-top {
+        0% {
+            -webkit-transform: translateY(60px);
+            opacity: 0;
+        }
+
+        20% {
+            opacity: 0.5;
+        }
+
+        100% {
+            -webkit-transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes slide-top {
+        0% {
+            transform: translateY(60px);
+            opacity: 0;
+        }
+
+        20% {
+            opacity: 0.5;
+        }
+
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
     }
 
-    20% {
-      opacity: 0.5;
+}
+
+.media-card {
+    width: 200px !important;
+}
+
+@media (min-width: 550px) {
+    .media-card {
+        width: 240px !important;
     }
+}
 
-    100% {
-      -webkit-transform: translateY(0);
-      opacity: 1;
+@media (min-width: 640px) {
+    .media-card {
+        width: 190px !important;
     }
-  }
+}
 
-  @keyframes slide-top {
-    0% {
-      transform: translateY(60px);
-      opacity: 0;
+@media (min-width: 800px) {
+    .media-card {
+        width: 245px !important;
     }
+}
 
-    20% {
-      opacity: 0.5;
+@media (min-width: 900px) {
+    .media-card {
+        width: 260px !important;
     }
+}
 
-    100% {
-      transform: translateY(0);
-      opacity: 1;
+@media (min-width: 1020px) {
+    .media-card {
+        width: 210px !important;
     }
-  }
+}
 
+@media (min-width: 1340px) {
+    .media-card {
+        width: 230px !important;
+    }
 }
diff --git a/src/main.jsx b/src/main.jsx
@@ -2,11 +2,8 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import router from "./routes/routes.jsx";
-import "@/assets/base.css";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")).render(
-    <React.StrictMode>
-        <RouterProvider router={router}></RouterProvider>
-    </React.StrictMode>,
+    <RouterProvider router={router}></RouterProvider>,
 );
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,6 +6,7 @@ export default {
     theme: {
         screens: {
             xs: "415px",
+            "2xl": "1400px",
             ...defaultTheme.screens,
         },
         extend: {