Atridad Lahiji
5281eb71ab
All checks were successful
Docker Deploy / build-and-push (push) Successful in 1m50s
37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
import { LuArrowRight, LuClock } from "@preact-icons/lu";
|
|
import { Post } from "../lib/posts.ts";
|
|
|
|
export default function PostCard(props: { post: Post }) {
|
|
const { post } = props;
|
|
return (
|
|
<div class="card bg-accent shadow-lg w-full sm:w-[calc(50%-1rem)] md:w-96 min-w-[280px] max-w-sm shrink">
|
|
<div class="card-body p-4 sm:p-6">
|
|
<h2 class="card-title text-base-100 justify-center text-center break-words">
|
|
{post.title}
|
|
</h2>
|
|
|
|
<p class="text-center text-base-100 break-words">{post.blurb}</p>
|
|
|
|
<div class="flex flex-wrap items-center justify-center text-base-100 opacity-75 gap-2 text-sm sm:text-base">
|
|
<LuClock class="flex-shrink-0" />
|
|
<span>
|
|
{post.publishedAt!.toLocaleDateString("en-us", {
|
|
month: "long",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
})}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="card-actions justify-end mt-4">
|
|
<a
|
|
href={`/post/${post.slug}`}
|
|
class="btn btn-circle btn-sm sm:btn-md btn-primary text-accent"
|
|
>
|
|
<LuArrowRight class="text-lg" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|