From a0df36e2dd48f81260e4861ec17944d0a255f43c Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Thu, 11 Jul 2024 07:12:37 +0700
Subject: [PATCH] feat(detail): update the positioning

---
 src/components/card/Card.tsx            |  8 ++++++--
 src/modules/detailMovie/detailMovie.tsx | 10 +++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/card/Card.tsx b/src/components/card/Card.tsx
index 2f4f037..e6c946d 100644
--- a/src/components/card/Card.tsx
+++ b/src/components/card/Card.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import Image from 'next/image';
 import { Movie } from '@/constant/movie';
 import { Skeleton } from '../ui/skeleton';
+import Link from 'next/link';
 
 interface ICard {
   movie: Movie;
@@ -13,7 +14,10 @@ const Card: React.FC<ICard> = ({ movie }) => {
   const [isLoading, setIsLoading] = useState(true);
 
   return (
-    <div className="relative h-[450px] w-[300px] overflow-hidden rounded-xl">
+    <Link
+      href={`/${movie.id}`}
+      className="relative h-[450px] w-[300px] overflow-hidden rounded-xl duration-300 hover:scale-105 hover:cursor-pointer"
+    >
       <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">
         {movie.release_date ? (
@@ -34,7 +38,7 @@ const Card: React.FC<ICard> = ({ movie }) => {
         onLoadingComplete={() => setIsLoading(false)}
         onLoad={() => setIsLoading(false)}
       />
-    </div>
+    </Link>
   );
 };
 
diff --git a/src/modules/detailMovie/detailMovie.tsx b/src/modules/detailMovie/detailMovie.tsx
index 600a4e6..827c4b8 100644
--- a/src/modules/detailMovie/detailMovie.tsx
+++ b/src/modules/detailMovie/detailMovie.tsx
@@ -35,7 +35,7 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
 
   return (
     <div className="">
-      <div className="relative mt-16 h-[30rem] w-full">
+      <div className="relative mt-16 h-[32rem] w-full">
         <button
           onClick={handleBack}
           className="absolute left-5 top-5 z-50 flex flex-row gap-2 rounded-full bg-slate-600 bg-opacity-80 px-5 py-3 text-white duration-100 hover:scale-105 hover:cursor-pointer hover:bg-slate-800 hover:bg-opacity-95"
@@ -58,7 +58,7 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
           onLoad={() => setIsLoading(false)}
         />
         {movie && (
-          <div className="absolute -bottom-12 left-32 right-52 z-30 flex flex-row rounded-lg">
+          <div className="absolute bottom-0 left-32 right-52 z-30 flex flex-row rounded-lg pb-8">
             {/* poster */}
             <Image
               src={`https://image.tmdb.org/t/p/original${movie?.poster_path}`}
@@ -68,7 +68,7 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
               className="rounded-lg border border-slate-800 shadow-2xl drop-shadow-2xl"
             />
 
-            <div className="ml-5 mt-3 flex flex-col gap-3 text-white">
+            <div className="ml-5 mt-3 flex max-h-[24rem] flex-col gap-3 overflow-hidden text-white">
               {/* year and runtime */}
               <div className="flex flex-row items-center gap-1">
                 <p className="ml-2 text-xl font-bold">
@@ -80,9 +80,9 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
 
               {/* title, overview, genres */}
               <h1 className="text-3xl font-bold">{movie.title}</h1>
-              <p>{movie.overview}</p>
+              <p className="overflow-y-auto">{movie.overview}</p>
               <div className="flex flex-row gap-2">
-                {movie.genres.map((genre, index) => (
+                {movie.genres.map((genre) => (
                   <div
                     key={genre.id}
                     className="rounded-full bg-slate-700 bg-opacity-80 px-4 py-2"