Blog Author

import Link from "next/link";

const posts = [
  {
    title: "Ship the smallest thing that teaches you something",
    date: "2026-06-30",
    reading: "5 min",
  },
  {
    title: "Feature flags are a liability with good marketing",
    date: "2026-06-11",
    reading: "9 min",
  },
  {
    title: "Notes on interviewing senior engineers",
    date: "2026-05-27",
    reading: "12 min",
  },
  {
    title: "The case for boring deploys",
    date: "2026-05-02",
    reading: "7 min",
  },
];

export default function BlogAuthor() {
  return (
    <section className="bg-background">
      <div className="mx-auto grid w-full max-w-4xl gap-12 px-6 py-20 sm:py-24 lg:grid-cols-[1fr_2fr]">
        {/* Author card */}
        <aside>
          <span className="flex size-16 items-center justify-center rounded-full bg-muted font-mono text-lg font-semibold text-muted-foreground">
            NB
          </span>
          <h2 className="mt-4 text-xl font-semibold tracking-tight">
            Nadia Bello
          </h2>
          <p className="mt-1 text-sm text-muted-foreground">
            Co-founder & CEO. Writes about building small, durable software
            companies — one essay a month, no growth hacks.
          </p>
          <dl className="mt-5 flex gap-6 border-t border-border/60 pt-4 font-mono text-xs text-muted-foreground">
            <div>
              <dd className="text-base font-semibold text-foreground tabular-nums">
                42
              </dd>
              <dt>essays</dt>
            </div>
            <div>
              <dd className="text-base font-semibold text-foreground tabular-nums">
                7 yrs
              </dd>
              <dt>writing</dt>
            </div>
          </dl>
        </aside>

        {/* Posts */}
        <div>
          {posts.map((post, index) => (
            <article
              key={post.title}
              className={index > 0 ? "border-t border-border/60" : ""}
            >
              <Link
                href="#"
                className="group flex items-baseline justify-between gap-6 py-5"
              >
                <div>
                  <h3 className="font-medium text-balance group-hover:underline group-hover:underline-offset-4">
                    {post.title}
                  </h3>
                  <p className="mt-1 font-mono text-xs text-muted-foreground">
                    {post.reading}
                  </p>
                </div>
                <time className="shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
                  {post.date}
                </time>
              </Link>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}