fix(nx-dev): video cards formatting

nrwl · Oct 4, 2023 · 4ffc2bb · 4ffc2bb
1 parent 2d12daf
commit 4ffc2bb
Showing 1 changed file with 16 additions and 12 deletions.
diff --git a/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
@@ -131,32 +131,36 @@ export function Card({
   const hasYoutubeId = !!youtubeRegex ? youtubeRegex[1] : '';
 
   return (
-    <div
+    <a
       key={title}
-      className="group relative flex rounded-md border border-slate-200 bg-slate-50/40 pr-8 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
+      href={url}
+      title={title}
+      className="group no-underline flex flex-col items-stretch rounded-md border border-slate-200 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
     >
       {!!hasYoutubeId && (
-        <img
-          className="!m-0 rounded-l-md bg-black object-contain"
-          alt="Youtube Link"
-          src={`https://img.youtube.com/vi/${hasYoutubeId}/default.jpg`}
-        />
+        <div className="max-h-24">
+          <img
+            className="!m-0 rounded-t-md bg-black object-contain !w-full h-full"
+            alt="Youtube Link"
+            src={`https://img.youtube.com/vi/${hasYoutubeId}/default.jpg`}
+          />
+        </div>
       )}
-      <div className="flex flex-col p-3 pr-0">
-        <a href={url} title={title} className="flex items-center font-semibold">
+      <div className="relative flex flex-col p-3 pr-8">
+        <span className="flex items-center font-semibold underline">
           <span className="absolute inset-0" aria-hidden="true"></span>
           {!hasYoutubeId ? iconMap[type] : null}
           {title}
-        </a>
+        </span>
         {description ? (
-          <p className="mt-1.5 w-full text-sm">{description}</p>
+          <p className="mt-1.5 w-full text-sm no-underline">{description}</p>
         ) : null}
 
         {/*HOVER ICON*/}
         <span className="absolute right-2 top-1/2 -translate-y-2.5 -translate-x-2 opacity-0 transition-all group-hover:translate-x-0 group-hover:opacity-100">
           <ArrowRightCircleIcon className="h-5 w-5" />
         </span>
       </div>
-    </div>
+    </a>
   );
 }