Global State

State shared across the application.

html

<div class="gst" data-count="3">
  <div class="gst__store" style="background:#D9C8F0;">store.currentUser = &quot;Ada&quot;</div>
  <div class="gst__subs">
    <span class="gst__sub">Header</span>
    <span class="gst__sub">Sidebar</span>
    <span class="gst__sub">Profile card</span>
  </div>
</div>
<style>
.gst { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.gst__store { text-align: center; font: 700 11px ui-monospace, monospace; padding: 10px; border-radius: 8px; margin-bottom: 14px; }
.gst__subs { display: flex; gap: 8px; }
.gst__sub { flex: 1; text-align: center; padding: 10px 4px; border-radius: 8px; background: #24143010; font-size: 11px; font-weight: 600; }
.gst[data-count="1"] .gst__sub:nth-child(n+2) { display: none; }
.gst[data-count="2"] .gst__sub:nth-child(n+3) { display: none; }
</style>

tailwind

<div class="gsttw gsttw--3 font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <div class="text-center font-bold text-[11px] font-mono py-2.5 rounded-lg mb-3.5" style="background:#D9C8F0;">store.currentUser = &quot;Ada&quot;</div>
  <div class="flex gap-2">
    <span class="gsttw__sub flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-semibold">Header</span>
    <span class="gsttw__sub flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-semibold">Sidebar</span>
    <span class="gsttw__sub flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-semibold">Profile card</span>
  </div>
</div>
<style>
.gsttw--1 .gsttw__sub:nth-child(n+2) { display: none; }
.gsttw--2 .gsttw__sub:nth-child(n+3) { display: none; }
</style>

react

export function GlobalState({
  storeKey = "currentUser",
  value = "Ada",
  subscriberCount = "3",
  accent = "#D9C8F0",
}) {
  const n = Number(subscriberCount);
  const subs = ["Header", "Sidebar", "Profile card"].filter((_, i) => i < n);
  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={{ textAlign: "center", fontWeight: 700, fontSize: 11, fontFamily: "ui-monospace, monospace", padding: 10, borderRadius: 8, marginBottom: 14, background: accent }}>store.{storeKey} = "{value}"</div>
      <div style={{ display: "flex", gap: 8 }}>
        {subs.map((s) => <span key={s} style={{ flex: 1, textAlign: "center", padding: "10px 4px", borderRadius: 8, background: "#24143010", fontSize: 11, fontWeight: 600 }}>{s}</span>)}
      </div>
    </div>
  );
}