From feae02a29705cfc566f41232ccfd9cdb074f8de6 Mon Sep 17 00:00:00 2001
From: iqbalpa <iqbalpahlevi16@gmail.com>
Date: Fri, 12 Jul 2024 09:48:41 +0700
Subject: [PATCH] feat(watchlist): create watchlist button in movie detail page

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

diff --git a/src/modules/detailMovie/detailMovie.tsx b/src/modules/detailMovie/detailMovie.tsx
index bd2f858..e3678b2 100644
--- a/src/modules/detailMovie/detailMovie.tsx
+++ b/src/modules/detailMovie/detailMovie.tsx
@@ -11,12 +11,16 @@ import Genres from '@/components/genres/genres';
 import YearRuntime from '@/components/yearRuntime/yearRuntime';
 import CrewList from '@/components/crewList/crewList';
 import TopCast from '@/components/topCast/topCast';
+import { useSelector } from 'react-redux';
+import { RootState } from '@/store/userStore';
+import { Plus } from 'lucide-react';
 
 interface IDetailMovieModule {
   id: string;
 }
 
 const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
+  const user = useSelector((state: RootState) => state.user.user);
   const [movie, setMovie] = useState<DetailMovie>();
   const [isLoading, setIsLoading] = useState(true);
 
@@ -77,7 +81,15 @@ const DetailMovieModule: React.FC<IDetailMovieModule> = ({ id }) => {
               {movie.overview}
             </p>
             <Genres genres={movie.genres} />
-            <Rating rating={movie.vote_average} />
+            <div className="flex flex-row gap-4">
+              <Rating rating={movie.vote_average} />
+              {user && (
+                <div className="flex flex-row items-center gap-2 rounded-xl bg-yellow-500 px-3 py-2 text-sm font-bold text-black duration-150 hover:scale-105 hover:cursor-pointer hover:bg-yellow-600 md:px-4 md:text-base">
+                  <Plus />
+                  <p className="">Add to watchlist</p>
+                </div>
+              )}
+            </div>
           </div>
         </div>
       </div>