fix(frontend): invalid dom-nesting title card fix (#482)

fix #476

src/components/TitleCard/index.tsx

@@ -159,16 +159,17 @@ const TitleCard: React.FC<TitleCardProps> = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
+            <div>
               <Link href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}>
                 <a
-                className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
+                  className="absolute w-full h-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
                   style={{
                     background:
                       'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
                   }}
                 >
-                <div className="absolute bottom-0 w-full left-0 right-0">
-                  <div className="px-2 text-white">
+                  <div className="flex items-end h-full w-full">
+                    <div className="px-2 pb-11 text-white">
                       {year && <div className="text-sm">{year}</div>}
 
                       <h1 className="text-xl leading-tight whitespace-normal">
@@ -186,11 +187,13 @@ const TitleCard: React.FC<TitleCardProps> = ({
                         {summary}
                       </div>
                     </div>
-                  <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
+                  </div>
+                </a>
+              </Link>
+
+              <div className="absolute flex justify-between left-0 bottom-0 right-0 px-2 py-2">
                 <Link
-                      href={
-                        mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`
-                      }
+                  href={mediaType === 'movie' ? `/movie/${id}` : `/tv/${id}`}
                 >
                   <a className="cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-indigo active:bg-indigo-700 transition ease-in-out duration-150">
                     <svg
@@ -215,8 +218,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
                     </svg>
                   </a>
                 </Link>
-                    {(!currentStatus ||
-                      currentStatus === MediaStatus.UNKNOWN) && (
+                {(!currentStatus || currentStatus === MediaStatus.UNKNOWN) && (
                   <button
                     onClick={(e) => {
                       e.preventDefault();
@@ -306,8 +308,6 @@ const TitleCard: React.FC<TitleCardProps> = ({
                 )}
               </div>
             </div>
-              </a>
-            </Link>
           </Transition>
         </div>
       </div>