From 3f5ebc528cf7c4e593b8068afd8f739d73d7cb04 Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Wed, 10 Jul 2024 21:46:24 +0700
Subject: [PATCH] feat(detail): create back button

---
 src/modules/detailMovie/detailMovie.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/modules/detailMovie/detailMovie.tsx b/src/modules/detailMovie/detailMovie.tsx
index 281b4fc..b1ddf37 100644
--- a/src/modules/detailMovie/detailMovie.tsx
+++ b/src/modules/detailMovie/detailMovie.tsx
@@ -1,14 +1,19 @@
+'use client';
+
 import api from '@/api/api';
 import { DetailMovie } from '@/constant/detailMovie';
 import React, { useEffect, useState } from 'react';
 import Image from 'next/image';
 import { Skeleton } from '@/components/ui/skeleton';
+import { CircleArrowLeft } from 'lucide-react';
+import { useRouter } from 'next/navigation';
 
 interface IDetailMovieModule {
   id: string;
 }
 
 const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
+  const router = useRouter();
   const [movie, setMovie] = useState<DetailMovie>();
   const [isLoading, setIsLoading] = useState(true);
 
@@ -25,9 +30,18 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
     fetchMovie();
   }, [id]);
 
+  const handleBack = () => router.push('/');
+
   return (
     <div className="">
       <div className="relative mt-16 h-[30rem] 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"
+        >
+          <CircleArrowLeft />
+          <p>Back</p>
+        </button>
         <div className="absolute inset-0 z-20 bg-gradient-to-b from-transparent to-black"></div>
         {isLoading && (
           <Skeleton className="absolute inset-0 z-30 h-full w-full" />
@@ -57,7 +71,7 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
               </p>
               <h1 className="text-3xl font-bold">{movie.title}</h1>
               <p>{movie.overview}</p>
-              <div className="flex flex-row gap-2 mt-2">
+              <div className="mt-2 flex flex-row gap-2">
                 {movie.genres.map((genre, index) => (
                   <div
                     key={genre.id}