fix(ui): add link to poster image on request items

sct · Mar 6, 2021 · 7289872 · 7289872
1 parent 1f8b03f
commit 7289872
Showing 1 changed file with 20 additions and 10 deletions.
diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx
@@ -139,17 +139,27 @@ const RequestItem: React.FC<RequestItemProps> = ({
             backgroundImage: `linear-gradient(90deg, rgba(31, 41, 55, 0.47) 0%, rgba(31, 41, 55, 1) 100%), url(//image.tmdb.org/t/p/w1920_and_h800_multi_faces/${title.backdropPath})`,
           }}
         />
-        <div className="relative flex flex-col justify-between w-full overflow-hidden sm:flex-row">
-          <div className="relative z-10 flex w-full overflow-hidden lg:w-1/2 xl:w-7/12 2xl:w-2/3">
-            <img
-              src={
-                title.posterPath
-                  ? `//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
-                  : '/images/overseerr_poster_not_found.png'
+        <div className="relative flex flex-col justify-between w-full sm:flex-row">
+          <div className="relative z-10 flex items-center w-full lg:w-1/2 xl:w-7/12 2xl:w-2/3">
+            <Link
+              href={
+                requestData.type === 'movie'
+                  ? `/movie/${requestData.media.tmdbId}`
+                  : `/tv/${requestData.media.tmdbId}`
               }
-              alt=""
-              className="h-full transition duration-300 scale-100 rounded-md shadow-sm cursor-pointer w-14 lg:w-auto lg:h-full transform-gpu hover:scale-105 hover:shadow-md"
-            />
+            >
+              <a className="flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md lg:w-14 transform-gpu hover:scale-105">
+                <img
+                  src={
+                    title.posterPath
+                      ? `//image.tmdb.org/t/p/w600_and_h900_bestv2${title.posterPath}`
+                      : '/images/overseerr_poster_not_found.png'
+                  }
+                  alt=""
+                  className="object-cover"
+                />
+              </a>
+            </Link>
             <div className="flex flex-col justify-center ml-2 overflow-hidden lg:ml-4">
               <Link
                 href={