2022-08-25 01:09:52 +03:00
|
|
|
import {
|
|
|
|
BackgroundImage,
|
|
|
|
generateDisplayDate,
|
|
|
|
formatDate,
|
|
|
|
} from "@urbit/foundation-design-system";
|
2022-06-28 01:01:14 +03:00
|
|
|
import Link from "next/link";
|
|
|
|
|
|
|
|
export default function BlogPreview({ post }) {
|
|
|
|
const date = generateDisplayDate(post.date);
|
|
|
|
return (
|
|
|
|
<div key={post.slug} className="mb-20 cursor-pointer">
|
|
|
|
<Link href={`/blog/${post.slug}`}>
|
2022-09-16 05:25:30 +03:00
|
|
|
<div className="flex items-center md:flex-row flex-col">
|
|
|
|
<div className="flex w-full">
|
2022-08-02 22:53:24 +03:00
|
|
|
{
|
|
|
|
// Not all blog posts have images
|
|
|
|
post.extra.image ? (
|
|
|
|
<BackgroundImage
|
|
|
|
src={post.extra.image}
|
|
|
|
className="rounded-lg aspect-w-5 aspect-h-4 w-full"
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<div className="rounded-lg aspect-w-5 aspect-h-4 w-full bg-wall-100" />
|
|
|
|
)
|
|
|
|
}
|
2022-07-03 01:14:31 +03:00
|
|
|
</div>
|
|
|
|
|
2022-09-16 05:25:30 +03:00
|
|
|
<div className="w-full md:pl-6 ">
|
2022-07-03 01:14:31 +03:00
|
|
|
<h3 className="mt-6 md:mt-0">{post.title}</h3>
|
|
|
|
<div className="flex items-center justify-between mt-2">
|
|
|
|
<div className="flex items-baseline">
|
|
|
|
{post.extra.author ? (
|
|
|
|
<div className="type-sub-bold mr-2">{post.extra.author}</div>
|
|
|
|
) : null}
|
|
|
|
{post.extra.ship ? (
|
|
|
|
<Link
|
|
|
|
href={`https://urbit.org/ids/${post.extra.ship}`}
|
|
|
|
passHref
|
|
|
|
>
|
|
|
|
<a className="type-sub-bold text-wall-500 font-mono">
|
|
|
|
{post.extra.ship}
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
) : null}
|
|
|
|
</div>
|
2022-06-28 01:01:14 +03:00
|
|
|
</div>
|
2022-08-02 22:53:24 +03:00
|
|
|
<div className="text-wall-500 type-sub mt-1">
|
|
|
|
{formatDate(date)}
|
|
|
|
</div>
|
2022-07-03 01:14:31 +03:00
|
|
|
|
|
|
|
{post?.description && <p className="mt-6">{post.description}</p>}
|
2022-06-28 01:01:14 +03:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</Link>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|