Task Queue

Collection of tasks awaiting processing.

html

<div class="tq tq--processing">
  <p class="tq__name">Video encoding</p>
  <div class="tq__row">
    <span class="tq__dot" style="background:#E8A020;"></span>
    <span class="tq__task">Task #1</span>
    <span class="tq__badge tq__badge--queued" role="status">queued</span>
    <span class="tq__badge tq__badge--processing" role="status">processing&hellip;</span>
    <span class="tq__badge tq__badge--done" role="status">done</span>
  </div>
  <p class="tq__waiting">2 more task(s) waiting behind it</p>
</div>
<style>
.tq { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.tq__name { margin: 0 0 12px; font-weight: 700; }
.tq__row { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; }
.tq__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; opacity: .3; }
.tq__task { flex: 1; font-weight: 600; font-size: 12px; }
.tq__badge { display: none; font-size: 10px; padding: 3px 9px; border-radius: 999px; background: #24143014; }
.tq--queued .tq__badge--queued, .tq--processing .tq__badge--processing, .tq--done .tq__badge--done { display: inline-block; }
.tq--processing .tq__dot { opacity: 1; }
.tq--done .tq__dot { opacity: 1; }
.tq__waiting { margin: 10px 0 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="tqtw tqtw--processing font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-3 font-bold">Video encoding</p>
  <div class="flex items-center gap-2 p-2.5 rounded-lg bg-white border border-[#24143018]">
    <span class="tqtw__dot w-2.5 h-2.5 rounded-full shrink-0 opacity-30" style="background:#E8A020;"></span>
    <span class="flex-1 font-semibold text-xs">Task #1</span>
    <span class="tqtw__badge tqtw__badge--queued hidden text-[10px] py-1 px-2.5 rounded-full bg-[#24143014]" role="status">queued</span>
    <span class="tqtw__badge tqtw__badge--processing hidden text-[10px] py-1 px-2.5 rounded-full bg-[#24143014]" role="status">processing&hellip;</span>
    <span class="tqtw__badge tqtw__badge--done hidden text-[10px] py-1 px-2.5 rounded-full bg-[#24143014]" role="status">done</span>
  </div>
  <p class="mt-2.5 text-[10px] text-[#24143099]">2 more task(s) waiting behind it</p>
</div>
<style>
.tqtw--queued .tqtw__badge--queued, .tqtw--processing .tqtw__badge--processing, .tqtw--done .tqtw__badge--done { display: inline-block; }
.tqtw--processing .tqtw__dot, .tqtw--done .tqtw__dot { opacity: 1; }
</style>

react

export function TaskQueue({
  queueName = "Video encoding",
  stage = "processing",
  accent = "#E8A020",
  queueLength = 2,
}) {
  const badgeText = { queued: "queued", processing: "processing\u2026", done: "done" }[stage];
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontWeight: 700 }}>{queueName}</p>
      <div style={{ display: "flex", alignItems: "center", gap: 8, padding: 10, borderRadius: 8, background: "#ffffff", border: "1px solid #24143018" }}>
        <span style={{ width: 10, height: 10, borderRadius: "50%", flexShrink: 0, opacity: stage === "queued" ? .3 : 1, background: accent }} />
        <span style={{ flex: 1, fontWeight: 600, fontSize: 12 }}>Task #1</span>
        <span role="status" style={{ fontSize: 10, padding: "3px 9px", borderRadius: 999, background: "#24143014" }}>{badgeText}</span>
      </div>
      <p style={{ margin: "10px 0 0", fontSize: 10, color: "#24143099" }}>{queueLength} more task(s) waiting behind it</p>
    </div>
  );
}