missing files

components/BlogList.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { BLOG_POSTS, type BlogPost } from "@/data/content";
+import { useStaggerReveal } from "@/hooks/useAnimations";
+import BlogPostCard from "@/components/BlogPostCard";
+import "../styles/blog.css";
+
+/** Sort posts newest-first by date (ISO display dates compare lexicographically). */
+function sortPostsNewestFirst(posts: BlogPost[]): BlogPost[] {
+  return [...posts].sort((a, b) => b.date.localeCompare(a.date));
+}
+
+/** The blog tab: every post, newest first, in a single vertical stack. */
+export default function BlogList() {
+  const posts = sortPostsNewestFirst(BLOG_POSTS);
+  const visible = useStaggerReveal(posts.length, 100);
+
+  return (
+    <div style={{ padding: "48px 0", minWidth: 0 }}>
+      <div
+        style={{
+          marginBottom: 8,
+          fontFamily: "var(--mono)",
+          fontSize: 11,
+          color: "var(--muted)",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+        }}
+      >
+        {"# blog"}
+      </div>
+      <h2
+        style={{
+          fontFamily: "var(--sans)",
+          fontSize: 28,
+          fontWeight: 700,
+          color: "var(--fg)",
+          margin: "0 0 32px 0",
+          letterSpacing: "-0.01em",
+        }}
+      >
+        {"Writing"}
+      </h2>
+
+      <div className="blog-list">
+        {posts.map((post, i) => (
+          <BlogPostCard key={post.id} post={post} visible={visible.has(i)} />
+        ))}
+      </div>
+    </div>
+  );
+}