From fa73184acf12db9a93927ac7c3f483bc8531313e Mon Sep 17 00:00:00 2001
From: Bharti Vilas Nagpure <104631882+BhartiNagpure@users.noreply.github.com>
Date: Wed, 2 Aug 2023 21:00:40 +0530
Subject: [PATCH] movie card content fix

---
 src/components/Cards/MovieCard.jsx | 91 ++++++++++++++----------------
 1 file changed, 43 insertions(+), 48 deletions(-)

diff --git a/src/components/Cards/MovieCard.jsx b/src/components/Cards/MovieCard.jsx
index 574f02d9..88812d6f 100644
--- a/src/components/Cards/MovieCard.jsx
+++ b/src/components/Cards/MovieCard.jsx
@@ -66,33 +66,33 @@ const MovieCard = (props) => {
 
   return (
     <>
-    <div className={`shadow flex my-4 p-3 group`} key={props.movie.id}>
-      <div
-        className={`${styles.MovieCard} relative flex justify-start items-end p-4 duration-200 rounded-[6px]`}
-        alt='movie poster'
-        style={{
-          backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.poster_path}), linear-gradient(0deg, #0D1117 0%, #161B22 10%, #0D1117 20%, transparent 100%)`,
-          backgroundSize: 'cover',
-          backgroundPositionX: 'center',
-          backgroundBlendMode: 'multiply',
-        }}
-      >
+      <div className={`shadow flex my-4 p-3 group`} key={props.movie.id}>
         <div
-          className={`absolute w-[40px] h-[40px] right-0 top-0 cursor-pointer group-hover:flex hidden sidebar m-3 shadow`}
+          className={`${styles.MovieCard} relative flex  justify-start items-end p-4 duration-200 rounded-[6px]`}
+          alt='movie poster'
+          style={{
+            backgroundImage: `url(https://image.tmdb.org/t/p/original/${props.movie.poster_path}), linear-gradient(0deg, #0D1117 0%, #161B22 10%, #0D1117 20%, transparent 100%)`,
+            backgroundSize: 'cover',
+            backgroundPositionX: 'center',
+            backgroundBlendMode: 'multiply',
+          }}
         >
           <div
-            className='bg-blue-gradient w-full h-full rounded-full flex items-center justify-center'
-            onClick={saveShow}
+            className={`absolute w-[40px] h-[40px] right-0 top-0 cursor-pointer group-hover:flex hidden sidebar m-3 shadow`}
           >
-            {like ? (
-              <FaHeart className='text-white' size={24} />
-            ) : (
-              <FaRegHeart className='text-white' size={24} />
-            )}
+            <div
+              className='bg-blue-gradient w-full h-full rounded-full flex items-center justify-center'
+              onClick={saveShow}
+            >
+              {like ? (
+                <FaHeart className='text-white' size={24} />
+              ) : (
+                <FaRegHeart className='text-white' size={24} />
+              )}
+            </div>
           </div>
-        </div>
-        {/* This is share icon */}
-        <div
+          {/* This is share icon */}
+          <div
             className={`absolute w-[40px] h-[40px] right-12 top-0 cursor-pointer group-hover:flex hidden sidebar m-3 shadow`}
           >
             <div
@@ -102,40 +102,35 @@ const MovieCard = (props) => {
               <FaShareAlt className="text-white" size={22} />
             </div>
           </div>
-        <Link to={'/movie/' + props.movie.title + '/' + props.movie.id}>
-          <div className='w-full opacity-90 text-white text-md font-medium mt-2 '>
-            <p className='' >{props.movie.title}</p>
-          </div>
-          <div style={{ marginBottom: '-38px', display:'flex' }}>
-            <CircleRating rating={props.movie.vote_average.toFixed(1)} />
-            <span className="date" style={{paddingLeft:'20px'}}>
-              {dayjs(props.movie.release_date).format("MMM D, YYYY")}
-            </span>
-          </div>
-        </Link>
+          <Link to={'/movie/' + props.movie.title + '/' + props.movie.id}>
+            <div className='w-full opacity-90 text-white text-md font-medium mb-5  '>
+              <p className='' >{props.movie.name}</p>
+            </div>
+            <div style={{ marginBottom: '-38px', display: 'flex' }}>
+              <CircleRating rating={props.movie.vote_average.toFixed(1)} />
+              <span className="date" style={{ paddingLeft: '20px' }}>
+                {dayjs(props.movie.release_date).format("MMM D, YYYY")}
+              </span>
+            </div>
+          </Link>
+          <div className='flex flex-col'>
           {props.type === 'movie' ? (
             <Link to={'/movie/' + props.movie.title + '/' + props.movie.id}>
               <div className='w-full opacity-90 text-white text-md font-medium mt-2 '>
                 <p className=''>{props.movie.title}</p>
-                <p className='text-dimWhite font-normal text-xs mt-2'>
-                  {props.movie.vote_average}/10
-                </p>
               </div>
             </Link>
-          ): (
+          ) : (
             <Link to={'/tv/' + props.movie.name + '/' + props.movie.id}>
-              <div className='w-full opacity-90 text-white text-md font-medium mt-2 '>
-                <p className=''>{props.movie.name}</p>
-                <p className='text-dimWhite font-normal text-xs mt-2'>
-                  {props.movie.vote_average}/10
-                </p>
+              <div className='w-full opacity-90 text-white text-md font-medium mt-2'>
               </div>
             </Link>
           )}
+          </div>
+        </div>
       </div>
-    </div>
-    {/* pop up code */}
-    <Transition appear show={openFilter} as={Fragment}>
+      {/* pop up code */}
+      <Transition appear show={openFilter} as={Fragment}>
         <Dialog
           as="div"
           className="relative z-10"
@@ -198,7 +193,7 @@ const MovieCard = (props) => {
                   <div className="flex flex-wrap justify-start m-4 gap-2 ">
                     <FacebookShareButton
                       hashtag={`sceneMoviePlatfrom #${props.movie.type === "movie" ? props.movie.title : props.movie.name}`}
-                      url={`https://scene-movie-platform.vercel.app/${props.movie.type}/${props.movie.type === "movie" ? shareUrl : shareTvUrl }/${props.movie.id}`}
+                      url={`https://scene-movie-platform.vercel.app/${props.movie.type}/${props.movie.type === "movie" ? shareUrl : shareTvUrl}/${props.movie.id}`}
                     >
                       <FacebookIcon size={45} round={true} />
                     </FacebookShareButton>
@@ -216,7 +211,7 @@ const MovieCard = (props) => {
                       <TwitterIcon size={45} round={true} />
                     </TwitterShareButton>
                     <LinkedinShareButton
-                    title={`${props.movie.type === "movie" ? props.movie.title : props.movie.name}`}
+                      title={`${props.movie.type === "movie" ? props.movie.title : props.movie.name}`}
                       url={`https://scene-movie-platform.vercel.app/${props.movie.type}/${props.movie.type === "movie" ? shareUrl : shareTvUrl}/${props.movie.id}`}
                     >
                       <LinkedinIcon size={45} round={true} />
@@ -234,7 +229,7 @@ const MovieCard = (props) => {
                       <TelegramIcon size={45} round={true} />
                     </TelegramShareButton>
                     <RedditShareButton
-                    title={`${props.movie.type === "movie" ? props.movie.title : props.movie.name}`}
+                      title={`${props.movie.type === "movie" ? props.movie.title : props.movie.name}`}
                       url={`https://scene-movie-platform.vercel.app/${props.movie.type}/${props.movie.type === "movie" ? shareUrl : shareTvUrl}/${props.movie.id}`}
                     >
                       <RedditIcon size={45} round={true} />