Approval Queue

Collection of pending approvals.

html

<section class="approval-queue" style="--accent:#BFD9F2;">
  <h3 id="approval-queue-heading" class="approval-queue__heading">Pending approvals (3)</h3>
  <ul class="approval-queue__list" aria-labelledby="approval-queue-heading">
    <li class="approval-queue__item"><span class="approval-queue__dot"></span>Q3 budget revision — awaiting Priya Shah</li>
    <li class="approval-queue__item"><span class="approval-queue__dot"></span>Vendor contract renewal — awaiting Marcus Webb</li>
    <li class="approval-queue__item"><span class="approval-queue__dot"></span>Design system rollout — awaiting Lena Ortiz</li>
  </ul>
</section>
<style>
.approval-queue { font: 15px/1.5 system-ui, sans-serif; max-width: 360px; padding: 18px 20px; background: #FAF7F2; color: #241430; border-radius: 14px; border: 1.5px solid #24143020; }
.approval-queue__heading { margin: 0 0 10px; font-size: 15px; font-weight: 700; }
.approval-queue__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.approval-queue__item { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; padding: 8px 10px; background: #24143008; border-radius: 8px; }
.approval-queue__dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--accent); }
</style>

tailwind

<section class="font-sans max-w-[360px] py-[18px] px-5 bg-[#FAF7F2] text-[#241430] rounded-2xl border-[1.5px] border-[#24143020]">
  <h3 id="approval-queue-heading-tw" class="m-0 mb-2.5 text-[15px] font-bold">Pending approvals (3)</h3>
  <ul aria-labelledby="approval-queue-heading-tw" class="list-none m-0 p-0 flex flex-col gap-2">
    <li class="flex items-start gap-2 text-sm py-2 px-2.5 bg-[#24143008] rounded-lg"><span class="flex-none w-2 h-2 mt-[5px] rounded-full" style="background:#BFD9F2"></span>Q3 budget revision — awaiting Priya Shah</li>
    <li class="flex items-start gap-2 text-sm py-2 px-2.5 bg-[#24143008] rounded-lg"><span class="flex-none w-2 h-2 mt-[5px] rounded-full" style="background:#BFD9F2"></span>Vendor contract renewal — awaiting Marcus Webb</li>
    <li class="flex items-start gap-2 text-sm py-2 px-2.5 bg-[#24143008] rounded-lg"><span class="flex-none w-2 h-2 mt-[5px] rounded-full" style="background:#BFD9F2"></span>Design system rollout — awaiting Lena Ortiz</li>
  </ul>
</section>

react

export function ApprovalQueue({
  heading = "Pending approvals",
  item1 = "Q3 budget revision — awaiting Priya Shah",
  item2 = "Vendor contract renewal — awaiting Marcus Webb",
  item3 = "Design system rollout — awaiting Lena Ortiz",
  showThird = true,
  accent = "#BFD9F2",
}) {
  const items = [item1, item2, ...(showThird ? [item3] : [])];
  return (
    <section style={{ fontFamily: "system-ui, sans-serif", maxWidth: 360, padding: "18px 20px", background: "#FAF7F2",
      color: "#241430", borderRadius: 14, border: "1.5px solid #24143020" }}>
      <h3 id="approval-queue-heading-react" style={{ margin: "0 0 10px", fontSize: 15, fontWeight: 700 }}>
        {heading} ({items.length})
      </h3>
      <ul aria-labelledby="approval-queue-heading-react" style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
        {items.map((it, i) => (
          <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 8, fontSize: 14, padding: "8px 10px", background: "#24143008", borderRadius: 8 }}>
            <span style={{ flex: "none", width: 8, height: 8, marginTop: 5, borderRadius: "50%", background: accent }} />
            {it}
          </li>
        ))}
      </ul>
    </section>
  );
}