export function WebhookCard() {
  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:border-[#111111]/30 transition-all">
        <div className="p-5">
          <div className="flex items-center gap-2">
            <span
              className="grid h-8 w-8 place-items-center rounded-lg bg-[#5E60CE]/10 text-[#5E60CE] text-[14px]"
              aria-hidden
            >
              ↯
            </span>
            <h3 className="text-[15px] font-medium tracking-tight">Order events</h3>
            <span className="ml-auto inline-flex items-center gap-1.5 rounded-full bg-emerald-50 text-emerald-700 px-2 py-0.5 text-[10px] font-mono uppercase tracking-[0.14em]">
              <span className="h-1.5 w-1.5 rounded-full bg-emerald-500" />
              Active
            </span>
          </div>

          {/* URL */}
          <div className="mt-4 rounded-md border border-[#1111111A] bg-[#FBFAF6] px-3 py-2.5 flex items-center justify-between">
            <span className="font-mono text-[12px] truncate">
              https://api.velyn.dev/<span className="text-[#5E60CE]">hooks/order_42</span>
            </span>
            <button
              type="button"
              className="text-[#6B6B66] hover:text-[#111111] opacity-60 group-hover:opacity-100 transition-opacity text-[12px]"
              aria-label="Copy URL"
            >
              ⧉
            </button>
          </div>

          {/* Events */}
          <div className="mt-4">
            <p className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-[#6B6B66]">
              Listening for
            </p>
            <div className="mt-2 flex flex-wrap gap-1.5">
              {["order.created", "order.paid", "order.shipped", "order.refunded"].map((e) => (
                <code
                  key={e}
                  className="rounded bg-[#F2F1EC] border border-[#1111111A] px-1.5 py-0.5 text-[11px] font-mono"
                >
                  {e}
                </code>
              ))}
            </div>
          </div>
        </div>

        {/* Recent delivery */}
        <div className="border-t border-[#1111111A] bg-[#FBFAF6] px-5 py-4">
          <div className="flex items-center justify-between">
            <p className="font-mono text-[10.5px] uppercase tracking-[0.18em] text-[#6B6B66]">
              Last delivery
            </p>
            <span className="font-mono text-[11px] text-emerald-700">
              200 · 142 ms
            </span>
          </div>
          <div className="mt-2 flex items-center justify-between text-[12px]">
            <span className="font-mono">order.paid · ord_8K42x</span>
            <span className="text-[#6B6B66] font-mono">3m ago</span>
          </div>
          {/* delivery bars */}
          <div className="mt-3 flex items-end gap-[3px] h-5">
            {Array.from({ length: 28 }).map((_, i) => {
              const failed = i === 8 || i === 17;
              return (
                <span
                  key={i}
                  className={`w-[3px] rounded-sm ${
                    failed ? "bg-rose-400" : "bg-emerald-500"
                  }`}
                  style={{ height: `${40 + (i % 6) * 12}%`, opacity: 0.5 + (i / 28) * 0.5 }}
                />
              );
            })}
          </div>
        </div>
      </article>
    </div>
  );
}
Webhook Endpoint Card

Order events
