Server State

Data originating from a backend/API.

html

<div class="srvst srvst--fresh">
  <div class="srvst__flow">
    <span class="srvst__node srvst__node--server" style="--a:#BFD9F2;">Server</span>
    <span class="srvst__arrow" aria-hidden="true">&rarr;</span>
    <span class="srvst__node srvst__node--client">Client copy</span>
  </div>
  <p class="srvst__key">/api/orders</p>
  <p class="srvst__status srvst__status--fresh">Fresh &mdash; matches the server exactly</p>
  <p class="srvst__status srvst__status--refetching">Refetching &mdash; showing the old copy while the new one loads</p>
  <p class="srvst__status srvst__status--stale">Stale &mdash; the server has moved on since this copy was cached</p>
  <p class="srvst__note">The client copy is never the source of truth &mdash; the server always is.</p>
</div>
<style>
.srvst { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.srvst__flow { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.srvst__node { flex: 1; text-align: center; padding: 10px 4px; border-radius: 8px; background: #24143010; font-size: 11px; font-weight: 700; }
.srvst--fresh .srvst__node--client, .srvst--stale .srvst__node--client { background: var(--a); }
.srvst--refetching .srvst__node--server, .srvst--refetching .srvst__node--client { background: var(--a); }
.srvst__arrow { color: #24143060; }
.srvst__key { margin: 0 0 8px; font: 11px ui-monospace, monospace; color: #24143099; }
.srvst__status { display: none; margin: 0; font-size: 11px; font-weight: 600; }
.srvst--fresh .srvst__status--fresh, .srvst--refetching .srvst__status--refetching, .srvst--stale .srvst__status--stale { display: block; }
.srvst__note { margin: 10px 0 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="srvsttw srvsttw--fresh font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <div class="flex items-center gap-2 mb-2.5">
    <span class="srvsttw__server flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-bold" style="--a:#BFD9F2;">Server</span>
    <span class="text-[#24143060]" aria-hidden="true">&rarr;</span>
    <span class="srvsttw__client flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-bold">Client copy</span>
  </div>
  <p class="m-0 mb-2 font-mono text-[11px] text-[#24143099]">/api/orders</p>
  <p class="srvsttw__status srvsttw__status--fresh hidden m-0 text-[11px] font-semibold">Fresh &mdash; matches the server exactly</p>
  <p class="srvsttw__status srvsttw__status--refetching hidden m-0 text-[11px] font-semibold">Refetching &mdash; showing the old copy while the new one loads</p>
  <p class="srvsttw__status srvsttw__status--stale hidden m-0 text-[11px] font-semibold">Stale &mdash; the server has moved on since this copy was cached</p>
  <p class="mt-2.5 m-0 text-[10px] text-[#24143099]">The client copy is never the source of truth &mdash; the server always is.</p>
</div>
<style>
.srvsttw--fresh .srvsttw__client, .srvsttw--stale .srvsttw__client { background: var(--a); }
.srvsttw--refetching .srvsttw__server, .srvsttw--refetching .srvsttw__client { background: var(--a); }
.srvsttw--fresh .srvsttw__status--fresh, .srvsttw--refetching .srvsttw__status--refetching, .srvsttw--stale .srvsttw__status--stale { display: block; }
</style>

react

export function ServerState({
  resourceName = "/api/orders",
  freshness = "fresh",
  accent = "#BFD9F2",
  showOwner = true,
}) {
  const statuses = {
    fresh: "Fresh \u2014 matches the server exactly",
    refetching: "Refetching \u2014 showing the old copy while the new one loads",
    stale: "Stale \u2014 the server has moved on since this copy was cached",
  };
  const node = (active) => ({ flex: 1, textAlign: "center", padding: "10px 4px", borderRadius: 8, fontSize: 11, fontWeight: 700, background: active ? accent : "#24143010" });
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
        <span style={node(freshness === "refetching")}>Server</span>
        <span style={{ color: "#24143060" }}>&rarr;</span>
        <span style={node(freshness !== "refetching")}>Client copy</span>
      </div>
      <p style={{ margin: "0 0 8px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>{resourceName}</p>
      <p style={{ margin: 0, fontSize: 11, fontWeight: 600 }}>{statuses[freshness]}</p>
      {showOwner && <p style={{ margin: "10px 0 0", fontSize: 10, color: "#24143099" }}>The client copy is never the source of truth &mdash; the server always is.</p>}
    </div>
  );
}