miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

fix(nx-dev): video cards formatting (#19449)

Browse Source
This commit is contained in:
Isaac Mann 2023-10-06 08:21:54 -04:00 committed by GitHub
parent 47fcce0dfb
commit 479d9a5c4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
nx-dev/ui-markdoc/src/lib/tags/cards.component.tsx
View File

@ -131,25 +131,29 @@ export function Card({
const hasYoutubeId = !!youtubeRegex ? youtubeRegex[1] : ''; const hasYoutubeId = !!youtubeRegex ? youtubeRegex[1] : '';
return ( return (
<div <a
key={title} 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 && ( {!!hasYoutubeId && (
<img <div className="max-h-24">
className="!m-0 rounded-l-md bg-black object-contain" <img
alt="Youtube Link" className="!m-0 rounded-t-md bg-black object-contain !w-full h-full"
src={`https://img.youtube.com/vi/${hasYoutubeId}/default.jpg`} alt="Youtube Link"
/> src={`https://img.youtube.com/vi/${hasYoutubeId}/default.jpg`}
/>
</div>
)} )}
<div className="flex flex-col p-3 pr-0"> <div className="relative flex flex-col p-3 pr-8">
<a href={url} title={title} className="flex items-center font-semibold"> <span className="flex items-center font-semibold underline">
<span className="absolute inset-0" aria-hidden="true"></span> <span className="absolute inset-0" aria-hidden="true"></span>
{!hasYoutubeId ? iconMap[type] : null} {!hasYoutubeId ? iconMap[type] : null}
{title} {title}
</a> </span>
{description ? ( {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} ) : null}
{/*HOVER ICON*/} {/*HOVER ICON*/}
@ -157,6 +161,6 @@ export function Card({
<ArrowRightCircleIcon className="h-5 w-5" /> <ArrowRightCircleIcon className="h-5 w-5" />
</span> </span>
</div> </div>
</div> </a>
); );
} }