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

chore(nx-dev): webinar page styling (#30010)

Browse Source 
Updates the /webinar page styling
This commit is contained in:
Isaac Mann 2025-02-13 09:52:37 -05:00 committed by GitHub
parent 1c2d0860b5
commit b5df8c25be
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
nx-dev/ui-webinar/src/lib/webinar-list.tsx
View File

@ -1,7 +1,10 @@
import { WebinarDataEntry } from '@nx/nx-dev/data-access-documents/node-only';
import { BlogEntry } from '@nx/nx-dev/ui-blog';
import { BlogAuthors, BlogEntry } from '@nx/nx-dev/ui-blog';
import { WebinarListItem } from './webinar-list-item';
import { CallToAction } from '@nx/nx-dev/ui-markdoc';
import Image from 'next/image';
import Link from 'next/link';
import { ButtonLink } from '@nx/nx-dev/ui-common';
export interface WebinarListProps {
webinars: WebinarDataEntry[];
@ -34,23 +37,43 @@ export function WebinarList({ webinars }: WebinarListProps): JSX.Element {
}) + (webinar.time ? ' - ' + webinar.time : '');
return (
<div className="mt-6 w-full max-w-xl">
<BlogEntry
post={webinar}
overrideLink={webinar.registrationUrl}
></BlogEntry>
<p className="my-4 font-bold">{dateAndTime}</p>
<p className="my-4">Presented by {authorsList}</p>
<p className="my-4">{webinar.description}</p>
{webinar.registrationUrl && (
<div className="max-w-md">
<CallToAction
title="Register today!"
description="Save your spot"
url={webinar.registrationUrl}
></CallToAction>
</div>
)}
<div className="mx-auto mt-8 w-full max-w-4xl lg:flex lg:max-w-7xl lg:gap-4">
<div className="flex-1">
<Link
href={webinar.registrationUrl || `/blog/${webinar.slug}`}
title={webinar.title}
className="text-balance text-2xl font-semibold text-slate-900 dark:text-white"
prefetch={false}
>
{webinar.title}
</Link>
<p className="my-4 font-bold">{dateAndTime}</p>
<p className="my-4">Presented by {authorsList}</p>
<p className="my-4">{webinar.description}</p>
{webinar.registrationUrl && (
<div className="max-w-md">
<CallToAction
title="Register today!"
description="Save your spot"
url={webinar.registrationUrl}
></CallToAction>
</div>
)}
</div>
<div className="relative hidden h-full flex-1 transform-gpu flex-col overflow-hidden rounded-2xl border border-slate-200 shadow transition-all duration-300 ease-in-out hover:scale-[1.02] hover:shadow-lg lg:flex dark:border-slate-800">
{webinar.cover_image && (
<div className="aspect-[1.7] w-full">
<Image
quality={100}
className="h-full w-full object-cover"
src={webinar.cover_image}
alt={webinar.title}
width={1400}
height={735}
/>
</div>
)}
</div>
</div>
);
})}