import Link from "next/link";

const posts = [
  {
    title: "Why we rewrote our docs from scratch",
    date: "2026-06-21",
    category: "Product",
  },
  {
    title: "Shipping dark mode across 200 components",
    date: "2026-06-09",
    category: "Design",
  },
  {
    title: "The case against feature flags (sometimes)",
    date: "2026-05-27",
    category: "Engineering",
  },
  {
    title: "What 1,000 support tickets taught us about onboarding",
    date: "2026-05-13",
    category: "Growth",
  },
];

export default function BlogList() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-3xl px-6 py-20 sm:py-24">
        <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
          Writing
        </h2>
        <p className="mt-2 text-muted-foreground">
          Notes on building, designing and running the product.
        </p>

        <ul className="mt-10">
          {posts.map((post) => (
            <li key={post.title} className="border-b border-border/60">
              <Link
                href="#"
                className="group flex items-baseline gap-6 py-5 transition-colors"
              >
                <span className="w-24 shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
                  {post.date}
                </span>
                <span className="font-medium text-balance group-hover:underline group-hover:underline-offset-4">
                  {post.title}
                </span>
                <span className="ml-auto hidden shrink-0 text-xs text-muted-foreground sm:inline">
                  {post.category}
                </span>
              </Link>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}
Blog List
