missing files

components/BlogPostCard.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { useState } from "react";
+import Link from "next/link";
+import { type BlogPost, imageSrc, imageDescription } from "@/data/content";
+import "../styles/blog.css";
+
+type Props = {
+  post: BlogPost;
+  visible: boolean;
+};
+
+/** One blog post: the card in the blog list. Unlike ProjectCard, clicking
+ *  navigates to the post instead of expanding in place. */
+export default function BlogPostCard({ post, visible }: Props) {
+  const [hovered, setHovered] = useState(false);
+
+  function postTagsComponent() {
+    return (
+      <div
+        style={{
+          display: "flex",
+          gap: 8,
+          flexWrap: "wrap",
+          marginBottom: 12,
+        }}
+      >
+        {post.tags.map((tag) => (
+          <span
+            key={tag}
+            style={{
+              fontFamily: "var(--mono)",
+              fontSize: 11,
+              fontWeight: 500,
+              color: "var(--accent)",
+              padding: "3px 10px",
+              background: "var(--accent-bg)",
+              borderRadius: 4,
+              letterSpacing: "0.02em",
+            }}
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    );
+  }
+
+  function coverImageComponent() {
+    const image = post.images![0];
+    return (
+      <img
+        src={`/${imageSrc(image)}`}
+        alt={imageDescription(image) ?? `${post.title} cover image`}
+        width={800}
+        height={180}
+        style={{
+          width: "100%",
+          borderRadius: 4,
+          marginBottom: 16,
+          objectFit: "cover",
+          height: 180,
+        }}
+      />
+    );
+  }
+
+  return (
+    <Link
+      href={`/blog/${post.slug}`}
+      className="blog-post-card"
+      title={`Read: ${post.title}`}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: "block",
+        width: "100%",
+        textDecoration: "none",
+        padding: 28,
+        overflow: "hidden",
+        background: hovered ? "var(--surface-hover)" : "var(--surface)",
+        border: `1px solid ${hovered ? "var(--accent)" : "var(--border)"}`,
+        borderRadius: 8,
+        transition: "all 0.35s cubic-bezier(0.16, 1, 0.3, 1)",
+        transform: visible
+          ? hovered
+            ? "translateY(-3px)"
+            : "translateY(0)"
+          : "translateY(12px)",
+        opacity: visible ? 1 : 0,
+        boxShadow: hovered ? "0 8px 32px rgba(0,0,0,0.12)" : "none",
+        pointerEvents: "auto",
+        cursor: "pointer",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "flex-start",
+          gap: 12,
+          marginBottom: 12,
+        }}
+      >
+        <div
+          style={{
+            fontFamily: "var(--mono)",
+            fontSize: 18,
+            fontWeight: 700,
+            color: hovered ? "var(--accent)" : "var(--fg)",
+            transition: "color 0.2s",
+            minWidth: 0,
+          }}
+        >
+          {post.title}
+        </div>
+        <div
+          style={{
+            fontFamily: "var(--mono)",
+            fontSize: 11,
+            color: "var(--muted)",
+            padding: "2px 8px",
+            background: "var(--bg)",
+            borderRadius: 4,
+            border: "1px solid var(--border)",
+            whiteSpace: "nowrap",
+            flexShrink: 0,
+          }}
+        >
+          {post.date}
+        </div>
+      </div>
+      {postTagsComponent()}
+      <p
+        style={{
+          fontFamily: "var(--sans)",
+          fontSize: 14,
+          lineHeight: 1.6,
+          color: "var(--fg-secondary)",
+          margin: "0 0 16px 0",
+        }}
+      >
+        {post.description}
+      </p>
+      {post.images && post.images.length > 0 && coverImageComponent()}
+    </Link>
+  );
+}