Work Queue

Items requiring action.

html

<div class="wq wq--all">
  <p class="wq__title">Review requests</p>
  <div class="wq__row wq__row--mine">PR #218 review<span class="wq__tag" style="background:#BFD9F2;">mine</span></div>
  <div class="wq__row wq__row--unassigned">PR #219 review<span class="wq__tag wq__tag--muted">unassigned</span></div>
  <div class="wq__row wq__row--mine">PR #220 review<span class="wq__tag" style="background:#BFD9F2;">mine</span></div>
  <p class="wq__count wq__count--all">3 items</p><p class="wq__count wq__count--mine">2 items</p><p class="wq__count wq__count--unassigned">1 item</p>
</div>
<style>
.wq { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.wq__title { margin: 0 0 10px; font-weight: 700; }
.wq__row { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-radius: 6px; background: #ffffff; border: 1px solid #24143014; margin-bottom: 6px; }
.wq__tag { font-size: 10px; padding: 2px 8px; border-radius: 999px; font-weight: 700; color: #241430; }
.wq__tag--muted { background: #24143014; color: #24143099; font-weight: 400; }
.wq--mine .wq__row--unassigned, .wq--unassigned .wq__row--mine { display: none; }
.wq__count { display: none; margin: 8px 0 0; font-size: 10px; color: #24143099; }
.wq--all .wq__count--all, .wq--mine .wq__count--mine, .wq--unassigned .wq__count--unassigned { display: block; }
</style>

tailwind

<div class="wqtw wqtw--all font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-2.5 font-bold">Review requests</p>
  <div class="wqtw__row wqtw__row--mine flex items-center justify-between p-2 rounded-md bg-white border border-[#24143014] mb-1.5">PR #218 review<span class="text-[10px] py-0.5 px-2 rounded-full font-bold" style="background:#BFD9F2;">mine</span></div>
  <div class="wqtw__row wqtw__row--unassigned flex items-center justify-between p-2 rounded-md bg-white border border-[#24143014] mb-1.5">PR #219 review<span class="text-[10px] py-0.5 px-2 rounded-full bg-[#24143014] text-[#24143099]">unassigned</span></div>
  <div class="wqtw__row wqtw__row--mine flex items-center justify-between p-2 rounded-md bg-white border border-[#24143014] mb-1.5">PR #220 review<span class="text-[10px] py-0.5 px-2 rounded-full font-bold" style="background:#BFD9F2;">mine</span></div>
  <p class="wqtw__count wqtw__count--all hidden m-0 mt-2 text-[10px] text-[#24143099]">3 items</p><p class="wqtw__count wqtw__count--mine hidden m-0 mt-2 text-[10px] text-[#24143099]">2 items</p><p class="wqtw__count wqtw__count--unassigned hidden m-0 mt-2 text-[10px] text-[#24143099]">1 item</p>
</div>
<style>
.wqtw--mine .wqtw__row--unassigned, .wqtw--unassigned .wqtw__row--mine { display: none; }
.wqtw--all .wqtw__count--all, .wqtw--mine .wqtw__count--mine, .wqtw--unassigned .wqtw__count--unassigned { display: block; }
</style>

react

export function WorkQueue({
  queueName = "Review requests",
  filter = "all",
  accent = "#BFD9F2",
  showCount = true,
}) {
  const rows = [
    { id: "PR #218 review", owner: "mine" },
    { id: "PR #219 review", owner: "unassigned" },
    { id: "PR #220 review", owner: "mine" },
  ].filter((r) => filter === "all" || r.owner === filter);
  const counts = { all: 3, mine: 2, unassigned: 1 };
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 10px", fontWeight: 700 }}>{queueName}</p>
      {rows.map((r) => (
        <div key={r.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: 8, borderRadius: 6, background: "#ffffff", border: "1px solid #24143014", marginBottom: 6 }}>
          {r.id}
          <span style={{ fontSize: 10, padding: "2px 8px", borderRadius: 999, fontWeight: r.owner === "mine" ? 700 : 400, color: r.owner === "mine" ? "#241430" : "#24143099", background: r.owner === "mine" ? accent : "#24143014" }}>{r.owner}</span>
        </div>
      ))}
      {showCount && <p style={{ margin: "8px 0 0", fontSize: 10, color: "#24143099" }}>{counts[filter]} item{counts[filter] === 1 ? "" : "s"}</p>}
    </div>
  );
}