71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
import Link from 'next/link';
|
|
|
|
import type { Post } from 'contentlayer/generated';
|
|
import { CoverImage } from '~/(marketing)/blog/components/cover-image';
|
|
import { DateFormatter } from '~/(marketing)/blog/components/date-formatter';
|
|
|
|
import { If } from '@kit/ui/if';
|
|
|
|
type Props = {
|
|
post: Post;
|
|
preloadImage?: boolean;
|
|
imageHeight?: string | number;
|
|
};
|
|
|
|
const DEFAULT_IMAGE_HEIGHT = 250;
|
|
|
|
function PostPreview({
|
|
post,
|
|
preloadImage,
|
|
imageHeight,
|
|
}: React.PropsWithChildren<Props>) {
|
|
const { title, image, date, readingTime, description } = post;
|
|
const height = imageHeight ?? DEFAULT_IMAGE_HEIGHT;
|
|
|
|
return (
|
|
<div className="rounded-xl transition-shadow duration-500 dark:text-gray-800">
|
|
<If condition={image}>
|
|
{(imageUrl) => (
|
|
<div className="relative mb-2 w-full" style={{ height }}>
|
|
<Link href={post.url}>
|
|
<CoverImage
|
|
preloadImage={preloadImage}
|
|
title={title}
|
|
src={imageUrl}
|
|
/>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</If>
|
|
|
|
<div className={'px-1'}>
|
|
<div className="flex flex-col space-y-1 px-1 py-2">
|
|
<h3 className="px-1 text-2xl font-bold leading-snug dark:text-white">
|
|
<Link href={post.url} className="hover:underline">
|
|
{title}
|
|
</Link>
|
|
</h3>
|
|
</div>
|
|
|
|
<div className="mb-2 flex flex-row items-center space-x-2 px-1 text-sm">
|
|
<div className="text-gray-600 dark:text-gray-300">
|
|
<DateFormatter dateString={date} />
|
|
</div>
|
|
|
|
<span className="text-gray-600 dark:text-gray-300">·</span>
|
|
|
|
<span className="text-gray-600 dark:text-gray-300">
|
|
{readingTime} mins reading
|
|
</span>
|
|
</div>
|
|
|
|
<p className="mb-4 px-1 text-sm leading-relaxed dark:text-gray-300">
|
|
{description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default PostPreview;
|