const FEED = [
  { who: "Maya", act: "approved", what: "PR #142 — auth callback fix", t: "2m", color: "#2A3D2F" },
  { who: "Sam", act: "commented on", what: "VEL-138 — onboarding empty state", t: "9m", color: "#5E60CE" },
  { who: "Noah", act: "deployed", what: "v2.4.1 to production", t: "14m", color: "#D97706" },
  { who: "Maya", act: "created", what: "design proposal — pricing v4", t: "31m", color: "#2A3D2F" },
  { who: "Tomás", act: "merged", what: "PR #139 — components browser filter", t: "1h", color: "#A33A2B" },
  { who: "Sam", act: "uploaded", what: "brand-guidelines-v4.pdf", t: "2h", color: "#5E60CE" },
];

export function ActivityFeedCard() {
  return (
    <div className="bg-[#FAFAF8] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article className="group w-full max-w-md rounded-xl border border-[#1111111A] bg-white overflow-hidden hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-shadow">
        <div className="flex items-center justify-between px-5 py-4 border-b border-[#1111111A]">
          <h3 className="text-[14px] font-medium tracking-tight">Team activity</h3>
          <div className="flex items-center gap-2">
            <button
              type="button"
              className="text-[10.5px] font-mono uppercase tracking-[0.14em] text-[#6B6B66] hover:text-[#111111] transition-colors"
            >
              All
            </button>
            <span className="h-3 w-px bg-[#1111111A]" />
            <button
              type="button"
              className="text-[10.5px] font-mono uppercase tracking-[0.14em] text-[#6B6B66] hover:text-[#111111] transition-colors"
            >
              Mine
            </button>
          </div>
        </div>

        {/* scrollable feed */}
        <ol
          className="max-h-72 overflow-y-auto"
          style={{ scrollbarWidth: "thin", scrollbarColor: "rgba(17,17,17,0.15) transparent" }}
        >
          {FEED.map((f, i) => (
            <li
              key={i}
              className="relative flex items-start gap-3 px-5 py-3.5 border-b border-[#1111111A] last:border-b-0 hover:bg-[#FBFAF6] transition-colors"
            >
              {/* timeline rail */}
              <span
                aria-hidden
                className="absolute left-[34px] top-0 bottom-0 w-px bg-[#1111111A]"
              />
              <span
                className="relative z-10 grid h-7 w-7 shrink-0 place-items-center rounded-full text-white text-[10px] font-mono ring-4 ring-white"
                style={{ background: f.color }}
              >
                {f.who[0]}
              </span>
              <div className="flex-1 min-w-0">
                <p className="text-[13px] leading-snug">
                  <span className="font-medium">{f.who}</span>{" "}
                  <span className="text-[#6B6B66]">{f.act}</span>{" "}
                  <span>{f.what}</span>
                </p>
                <p className="mt-0.5 font-mono text-[11px] text-[#6B6B66]">
                  {f.t} ago
                </p>
              </div>
            </li>
          ))}
        </ol>

        <a
          href="#"
          className="block text-center text-[12px] font-medium py-3 border-t border-[#1111111A] hover:bg-[#FBFAF6] transition-colors"
        >
          See all activity <span aria-hidden className="inline-block transition-transform group-hover:translate-x-0.5">→</span>
        </a>
      </article>
    </div>
  );
}
Activity Feed Card

Team activity
