From c5477e63c37436c1396034f2c7ad834950fb0e69 Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Thu, 11 Jul 2024 16:09:51 +0700
Subject: [PATCH] feat(home): implement responsive design

---
 src/components/backdrop/backdrop.tsx     |  6 +++---
 src/components/card/card.tsx             |  2 +-
 src/components/header/header.tsx         | 17 +++++++++++------
 src/components/listMovies/listMovies.tsx |  2 +-
 src/modules/home/home.tsx                |  2 +-
 5 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/backdrop/backdrop.tsx b/src/components/backdrop/backdrop.tsx
index 336bfb8..e7b0198 100644
--- a/src/components/backdrop/backdrop.tsx
+++ b/src/components/backdrop/backdrop.tsx
@@ -14,11 +14,11 @@ const Backdrop: React.FC<IBackdrop> = ({ movie, backdrop }) => {
   return (
     <div className="relative h-[32rem] w-full">
       <div className="absolute inset-0 z-20 bg-black bg-opacity-30"></div>
-      <div className="absolute bottom-0 left-0 z-20 p-4 px-60 text-white">
-        <p className="mb-2 text-2xl font-bold">
+      <div className="absolute bottom-0 left-0 z-20 p-4 px-5 text-white md:px-20 lg:px-60">
+        <p className="mb-2 text-lg font-bold lg:text-2xl">
           {movie?.title} ({movie?.release_date.split('-')[0]})
         </p>
-        <p>{movie?.overview}</p>
+        <p className="text-sm lg:text-base">{movie?.overview}</p>
       </div>
       {isLoading && (
         <Skeleton className="absolute inset-0 z-30 h-full w-full" />
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 0bd2ce1..e6a3a7c 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -16,7 +16,7 @@ const Card: React.FC<ICard> = ({ movie }) => {
   return (
     <Link
       href={`/${movie.id}`}
-      className="relative h-[450px] w-[300px] overflow-hidden rounded-xl duration-300 hover:scale-105 hover:cursor-pointer"
+      className="relative h-[300px] w-[200px] overflow-hidden rounded-xl duration-300 hover:scale-105 hover:cursor-pointer md:h-[390px] md:w-[260px] xl:h-[450px] xl:w-[300px]"
     >
       <div className="absolute inset-0 z-10 bg-black bg-opacity-20"></div>
       <div className="absolute left-0 top-0 z-20 w-full p-4 text-center text-white">
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 5f6be80..7bb0486 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -20,15 +20,20 @@ const Header: React.FC = () => {
   }, []);
 
   return (
-    <div
-      className={`fixed top-0 z-50 h-16 w-full p-4 transition-all duration-500 ${
+    <header
+      className={`fixed top-0 z-50 w-full p-4 transition-all duration-500 ${
         isScrolled ? 'bg-opacity-100' : 'bg-opacity-10'
       } bg-slate-800`}
     >
-      <Link href="/" className="text-2xl font-bold text-white">
-        Movies Catalog
-      </Link>
-    </div>
+      <div className="container mx-auto flex h-10 md:h-16 items-center justify-between">
+        <Link
+          href="/"
+          className="text-lg font-bold text-white md:text-xl lg:text-2xl"
+        >
+          Movies Catalog
+        </Link>
+      </div>
+    </header>
   );
 };
 
diff --git a/src/components/listMovies/listMovies.tsx b/src/components/listMovies/listMovies.tsx
index c9adae4..660b861 100644
--- a/src/components/listMovies/listMovies.tsx
+++ b/src/components/listMovies/listMovies.tsx
@@ -9,7 +9,7 @@ interface IListMovies {
 
 const ListMovies: React.FC<IListMovies> = ({ movies }) => {
   return (
-    <div className="grid grid-cols-4 gap-5 px-28 py-10">
+    <div className="grid grid-cols-1 gap-3 py-10 md:grid-cols-2 lg:grid-cols-3 lg:gap-5 xl:grid-cols-4 xl:px-28">
       {movies.map((movie, index) => (
         <Card key={movie.id} movie={movie} />
       ))}
diff --git a/src/modules/home/home.tsx b/src/modules/home/home.tsx
index 1a7c75d..4cb9793 100644
--- a/src/modules/home/home.tsx
+++ b/src/modules/home/home.tsx
@@ -69,7 +69,7 @@ const HomeModule: React.FC = () => {
   };
 
   return (
-    <div className="flex min-h-screen w-full flex-col pb-20">
+    <div className="flex min-h-screen w-full flex-col items-center pb-20">
       <Backdrop movie={movies[2]} backdrop={backdrop} />
       <SearchBar query={query} handleQueryChange={handleQueryChange} />
       <ListMovies movies={movies} />