Posts

components/PostCard.tsx

@@ -0,0 +1,37 @@
+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 className="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>
+  );
+}