We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BLOG] Remove after 5.1 is stable
fit="cover"
websites/apps/next-blog/src/app/components/blog/PostCard.tsx
Line 25 in 20e0fec
import { cx } from '../../../utils/cx' import { parseISO, format } from 'date-fns' import PhotographIcon from '@heroicons/react/24/outline/PhotoIcon' import Image from 'next/image' import type { BlogPost } from '../../../utils/types' import { AuthorList } from './AuthorList' import { Tags } from './Tags' import { FaArrowRight } from 'react-icons/fa/index' import Link from 'next/link' interface Props { post: BlogPost aspect?: any preloadImage?: boolean className?: string wide?: boolean } export async function PostCard({ post, aspect, preloadImage, wide, className: className = wide ? 'card grid md:flex group' : 'flex-col flex group card', }: Props): // @ts-expect-error TODO: [BLOG] Remove after 5.1 is stable JSX.Element { return ( <div className={className}> <div className={cx( 'overflow-hidden border-black bg-gray-100 transition-all dark:border-white dark:bg-gray-800', 'aspect-video', 'relative', wide ? 'w-full border-b-2 md:border-b-0 md:border-r-2' : 'border-b-2', )} > {post.image ? ( <Image src={ (wide ? post.image?.formats?.large?.url : post.image?.formats?.medium?.url) ?? post.image.url } alt={post.image.alt || 'Thumbnail'} className={'h-full w-full object-cover transition-all'} loading={preloadImage ? 'eager' : 'lazy'} height={ (wide ? post.image?.formats?.large?.height ?? post.image?.formats?.medium?.height : post.image?.formats?.medium?.height) ?? post.image.height } width={ (wide ? post.image?.formats?.large?.width ?? post.image?.formats?.medium?.width : post.image?.formats?.medium?.width) ?? post.image.width } // aspectRatio={aspect === 'landscape' ? '16:9' : '16:9'} // fit="cover" /> ) : ( <span className="absolute left-1/2 top-1/2 h-16 w-16 -translate-x-1/2 -translate-y-1/2 text-gray-200"> <PhotographIcon /> </span> )} <Link className={`group/button absolute right-0 top-4 z-10 overflow-clip !rounded-none !border-2 !border-r-0 border-black !bg-orange-500 px-4 py-1 text-lg !font-semibold text-black dark:border-white dark:text-white md:text-xl `} href={`/blog/${post?.category?.title?.toLowerCase().replace(' ', '-')}`} > <span className="sleek-underline group-hover/button:after:w-full"> {post.category?.title} </span> </Link> <Tags tags={post.blog_tags ?? []} className="absolute bottom-3 right-4 z-10 flex max-w-[80%] flex-wrap justify-end gap-x-1 text-sm" /> </div> <div className={cx( 'flex flex-grow flex-col gap-2 bg-white dark:bg-slate-700 md:gap-6 ', wide ? 'p-6 pb-4 pt-6' : 'p-6', )} > <div className="flex items-center justify-between"> <time className="text-sm font-medium text-black dark:text-slate-300" date-time={post?.publishDate ?? post.publishedAt ?? post.createdAt} > {format( parseISO( post?.publishDate ?? post?.publishedAt ?? post.createdAt ?? new Date().toISOString(), ), 'MMMM dd, yyyy', )} </time> </div> <h2 className="text-brand-primary font-sans text-xl font-semibold leading-tight tracking-tighter dark:text-white md:text-2xl"> {post.title} </h2> <div className="flex flex-col justify-end gap-y-4 md:flex-row md:items-center md:justify-between"> <AuthorList authors={[...(post.team_members ?? []), ...(post.blog_authors ?? [])]} /> </div> <div> {post.excerpt && ( <p className="line-clamp-4 max-w-[50ch] font-medium leading-relaxed text-black dark:text-white"> <Link href={`/${post.slug}`}>{post.excerpt}</Link> </p> )} </div> <Link href={`/${post.slug}`} className="link-overlay mt-auto"> <span className="sleek-underline text-brand-primary dark:text-brand-primary relative z-10 ml-auto flex h-min w-max items-center gap-2 py-1 text-xl font-medium text-black dark:text-white"> Read <FaArrowRight /> </span> </Link> </div> </div> ) }
617a61ef2bad7e5594390d50e949de8c87c6daa5
The text was updated successfully, but these errors were encountered:
No branches or pull requests
[BLOG] Remove after 5.1 is stable
fit="cover"
websites/apps/next-blog/src/app/components/blog/PostCard.tsx
Line 25 in 20e0fec
617a61ef2bad7e5594390d50e949de8c87c6daa5
The text was updated successfully, but these errors were encountered: