export function NotificationActionCard() {
  return (
    <div className="bg-[#F2F1EC] antialiased px-10 py-14 grid place-items-center text-[#111111]">
      <article
        className="group relative w-full max-w-md rounded-xl border border-[#1111111A] bg-white p-5 hover:shadow-[0_24px_60px_-30px_rgba(17,17,17,0.18)] transition-shadow"
        role="status"
      >
        {/* Side accent */}
        <span
          aria-hidden
          className="absolute left-0 top-0 bottom-0 w-1 rounded-l-xl"
          style={{
            background: "linear-gradient(180deg, #5E60CE, #2A3D2F)",
          }}
        />

        <div className="flex items-start gap-3 pl-1">
          <span
            className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-[#5E60CE]/10 text-[#5E60CE] text-[15px]"
            aria-hidden
          >
            ✦
          </span>
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2">
              <h3 className="text-[14px] font-medium">Maya invited you to review</h3>
              <span className="font-mono text-[10px] uppercase tracking-[0.14em] text-[#6B6B66]">
                · 3m
              </span>
            </div>
            <p className="mt-1 text-[12.5px] text-[#6B6B66] leading-relaxed">
              Design proposal v4 — “Editorial pricing page” needs your sign-off
              before tomorrow’s standup.
            </p>

            <div className="mt-3 flex items-center gap-2">
              <button
                type="button"
                className="rounded-md bg-[#111111] text-white px-3 py-1.5 text-[12px] font-medium hover:bg-[#1F1F1D] transition-colors"
              >
                Open review
              </button>
              <button
                type="button"
                className="rounded-md border border-[#1111111A] px-3 py-1.5 text-[12px] font-medium hover:bg-[#F7F6F2] transition-colors"
              >
                Snooze 1h
              </button>
              <button
                type="button"
                className="ml-auto text-[#6B6B66] hover:text-[#111111] text-[12px] transition-colors"
                aria-label="Dismiss"
              >
                ✕
              </button>
            </div>
          </div>
        </div>
      </article>
    </div>
  );
}
Notification with Actions

Maya invited you to review
