Dev Now

import { BookOpen, Hammer, Headphones, MapPin } from "lucide-react";

const now = [
  {
    icon: Hammer,
    label: "Building",
    value: "A CRDT-backed notes app, offline-first.",
  },
  {
    icon: BookOpen,
    label: "Reading",
    value: "“Designing Data-Intensive Applications”, again.",
  },
  {
    icon: Headphones,
    label: "On repeat",
    value: "Low-fi and the hum of a mechanical keyboard.",
  },
  {
    icon: MapPin,
    label: "Based in",
    value: "Lisbon — open to remote work worldwide.",
  },
];

export default function DevNow() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-2xl px-6 py-20 sm:py-24">
        <div className="rounded-2xl border border-border/60 bg-card p-8">
          <div className="flex items-center gap-2.5">
            <span className="relative flex size-2.5">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-500/60 motion-reduce:hidden" />
              <span className="relative inline-flex size-2.5 rounded-full bg-emerald-500" />
            </span>
            <h2 className="font-mono text-sm uppercase tracking-wide text-muted-foreground">
              Right now
            </h2>
          </div>
          <p className="mt-4 text-lg font-medium tracking-tight text-balance">
            A snapshot of what has my attention this week.
          </p>

          <dl className="mt-8 space-y-5">
            {now.map((item) => (
              <div key={item.label} className="flex items-start gap-4">
                <span className="flex size-9 shrink-0 items-center justify-center rounded-lg border border-border/60 bg-background text-muted-foreground">
                  <item.icon className="size-4" />
                </span>
                <div>
                  <dt className="font-mono text-xs uppercase tracking-wide text-muted-foreground">
                    {item.label}
                  </dt>
                  <dd className="mt-0.5 text-sm">{item.value}</dd>
                </div>
              </div>
            ))}
          </dl>

          <p className="mt-8 border-t border-border/60 pt-4 font-mono text-xs text-muted-foreground">
            inspired by nownownow.com · last updated this week
          </p>
        </div>
      </div>
    </section>
  );
}