Session State

State valid for a session.

html

<div class="sesst sesst--active">
  <p class="sesst__id">Session <code>sess_8f2c</code> <span class="sesst__badge sesst__badge--active" style="background:#E8A020;">active</span><span class="sesst__badge sesst__badge--expired">expired</span></p>
  <p class="sesst__cart">Cart: <strong class="sesst__count-active">3 items</strong><strong class="sesst__count-expired">0 items &mdash; cleared</strong></p>
  <p class="sesst__note">Session state lives only for this visit &mdash; it ends when the session does.</p>
</div>
<style>
.sesst { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.sesst__id { margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.sesst__id code { font: 11px ui-monospace, monospace; }
.sesst__badge { display: none; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #241430; }
.sesst--active .sesst__badge--active { display: inline-block; }
.sesst--expired .sesst__badge--expired { display: inline-block; background: #24143014; color: #24143099; }
.sesst__cart { margin: 0 0 8px; font-size: 13px; }
.sesst__count-active, .sesst__count-expired { display: none; }
.sesst--active .sesst__count-active, .sesst--expired .sesst__count-expired { display: inline; }
.sesst__note { margin: 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="sesttw sesttw--active font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-2.5 flex items-center gap-2">Session <code class="font-mono text-[11px]">sess_8f2c</code> <span class="sesttw__badge-active hidden text-[10px] font-bold py-1 px-2.5 rounded-full" style="background:#E8A020;">active</span><span class="sesttw__badge-expired hidden text-[10px] font-bold py-1 px-2.5 rounded-full bg-[#24143014] text-[#24143099]">expired</span></p>
  <p class="m-0 mb-2 text-[13px]">Cart: <strong class="sesttw__count-active hidden">3 items</strong><strong class="sesttw__count-expired hidden">0 items &mdash; cleared</strong></p>
  <p class="m-0 text-[10px] text-[#24143099]">Session state lives only for this visit &mdash; it ends when the session does.</p>
</div>
<style>
.sesttw--active .sesttw__badge-active, .sesttw--active .sesttw__count-active { display: inline-block; }
.sesttw--expired .sesttw__badge-expired, .sesttw--expired .sesttw__count-expired { display: inline-block; }
</style>

react

export function SessionState({
  sessionId = "sess_8f2c",
  itemCount = 3,
  status = "active",
  accent = "#E8A020",
}) {
  const active = status === "active";
  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 10px", display: "flex", alignItems: "center", gap: 8 }}>
        Session <code style={{ fontFamily: "ui-monospace, monospace", fontSize: 11 }}>{sessionId}</code>
        <span style={{ fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 999, color: active ? "#241430" : "#24143099", background: active ? accent : "#24143014" }}>{status}</span>
      </p>
      <p style={{ margin: "0 0 8px", fontSize: 13 }}>Cart: <strong>{active ? `${itemCount} items` : "0 items \u2014 cleared"}</strong></p>
      <p style={{ margin: 0, fontSize: 10, color: "#24143099" }}>Session state lives only for this visit &mdash; it ends when the session does.</p>
    </div>
  );
}