From 5ac5605933d066d356fab33389862fb6e306dd8e Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 22:47:06 -0500
Subject: [PATCH] feat: PostCard card boundary + author + reading time
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Card: rounded-xl, border, bg-canvas, p-6, hover shadow-card
- Author and reading time on meta line with · separators
- Tags use rounded-full pill shape (consistent with post detail)
- Title hover via group-hover:text-accent
- Excerpt uses leading-relaxed text-sm
---
 components/blog/PostCard.tsx | 32 +++++++++++++++++---------------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/components/blog/PostCard.tsx b/components/blog/PostCard.tsx
index cbd5f3c..d199dbc 100644
--- a/components/blog/PostCard.tsx
+++ b/components/blog/PostCard.tsx
@@ -1,38 +1,40 @@
-"use client";
+'use client';
 
-import Link from "next/link";
-import { m } from "motion/react";
-import type { PostMeta } from "@/lib/posts";
+import Link from 'next/link';
+import { m } from 'motion/react';
+import type { PostMeta } from '@/lib/posts';
 
-interface PostCardProps extends PostMeta {
-  index?: number;
-}
-
-export function PostCard({ slug, title, date, excerpt, index = 0, tags = [] }: PostCardProps) {
+export function PostCard({ slug, title, date, excerpt, tags = [], author, readingTime, index = 0 }: PostMeta & { index?: number }) {
   return (
     <m.article
       initial={{ opacity: 0, y: 20 }}
       whileInView={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.5, delay: index * 0.07 }}
       viewport={{ once: true }}
-      className="scroll-mt-20"
+      className="group relative scroll-mt-20 rounded-xl border border-border bg-canvas p-6 transition-all hover:border-border/80 hover:shadow-card"
     >
       <Link href={`/posts/${slug}/`} className="block">
-        <time className="font-mono text-sm text-ink-soft">{date}</time>
-        <h3 className="heading-md text-ink mt-1 mb-2 hover:text-accent transition-colors">
+        <div className="flex items-center gap-3 text-xs text-ink-soft mb-3">
+          <time className="font-mono">{date}</time>
+          {author && <span className="text-ink-soft/70">·</span>}
+          {author && <span>{author}</span>}
+          {readingTime && <span className="text-ink-soft/70">·</span>}
+          {readingTime && <span className="font-mono">{readingTime} min read</span>}
+        </div>
+        <h3 className="heading-md text-ink mt-0 mb-3 group-hover:text-accent transition-colors">
           {title}
         </h3>
         {tags && tags.length > 0 && (
-          <div className="flex flex-wrap gap-1 mt-2">
+          <div className="flex flex-wrap gap-1.5 mt-3">
             {tags.slice(0, 3).map((tag) => (
-              <span key={tag} className="rounded bg-surface px-2 py-0.5 text-xs text-ink-soft">
+              <span key={tag} className="rounded-full bg-surface/50 border border-border px-2.5 py-0.5 text-xs text-ink-soft">
                 {tag}
               </span>
             ))}
           </div>
         )}
         {excerpt && (
-          <p className="text-ink-soft leading-7 mt-2">{excerpt}</p>
+          <p className="text-ink-soft leading-relaxed mt-3 text-sm">{excerpt}</p>
         )}
       </Link>
     </m.article>