URL State

State represented in the URL.

html

<div class="urls urls--images">
  <div class="urls__bar">
    <span class="urls__dot"></span><span class="urls__dot"></span><span class="urls__dot"></span>
    <code class="urls__url">yoursite.app/search?tab=images&amp;page=2</code>
  </div>
  <div class="urls__tabs">
    <span class="urls__tab urls__tab--results" style="--a:#BFD9F2;">Results</span>
    <span class="urls__tab urls__tab--images" style="--a:#BFD9F2;">Images</span>
    <span class="urls__tab urls__tab--news" style="--a:#BFD9F2;">News</span>
  </div>
  <p class="urls__note">Refreshing, sharing or bookmarking this link reproduces exactly this view &mdash; the state lives in the URL, not in memory.</p>
</div>
<style>
.urls { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 320px; box-sizing: border-box; }
.urls__bar { display: flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid #24143018; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }
.urls__dot { width: 6px; height: 6px; border-radius: 50%; background: #24143030; flex-shrink: 0; }
.urls__url { font: 10px ui-monospace, monospace; margin-left: 4px; word-break: break-all; }
.urls__tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.urls__tab { flex: 1; text-align: center; padding: 7px 4px; border-radius: 6px; background: #24143010; font-size: 11px; font-weight: 600; }
.urls--results .urls__tab--results, .urls--images .urls__tab--images, .urls--news .urls__tab--news { background: var(--a); }
.urls__note { margin: 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="urlstw urlstw--images font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[320px] box-border">
  <div class="flex items-center gap-1.5 bg-white border border-[#24143018] rounded-lg py-2 px-2.5 mb-2.5">
    <span class="w-1.5 h-1.5 rounded-full bg-[#24143030] shrink-0"></span><span class="w-1.5 h-1.5 rounded-full bg-[#24143030] shrink-0"></span><span class="w-1.5 h-1.5 rounded-full bg-[#24143030] shrink-0"></span>
    <code class="font-mono text-[10px] ml-1 break-all">yoursite.app/search?tab=images&amp;page=2</code>
  </div>
  <div class="flex gap-1.5 mb-2.5">
    <span class="urlstw__tab urlstw__tab--results flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[11px] font-semibold" style="--a:#BFD9F2;">Results</span>
    <span class="urlstw__tab urlstw__tab--images flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[11px] font-semibold" style="--a:#BFD9F2;">Images</span>
    <span class="urlstw__tab urlstw__tab--news flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[11px] font-semibold" style="--a:#BFD9F2;">News</span>
  </div>
  <p class="m-0 text-[10px] text-[#24143099]">Refreshing, sharing or bookmarking this link reproduces exactly this view &mdash; the state lives in the URL, not in memory.</p>
</div>
<style>
.urlstw--results .urlstw__tab--results, .urlstw--images .urlstw__tab--images, .urlstw--news .urlstw__tab--news { background: var(--a); }
</style>

react

export function UrlState({
  basePath = "/search",
  tab = "images",
  page = 2,
  accent = "#BFD9F2",
}) {
  const tabs = ["results", "images", "news"];
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 320, boxSizing: "border-box" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 6, background: "#ffffff", border: "1px solid #24143018", borderRadius: 8, padding: "8px 10px", marginBottom: 10 }}>
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#24143030", flexShrink: 0 }} />
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#24143030", flexShrink: 0 }} />
        <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#24143030", flexShrink: 0 }} />
        <code style={{ fontFamily: "ui-monospace, monospace", fontSize: 10, marginLeft: 4, wordBreak: "break-all" }}>yoursite.app{basePath}?tab={tab}&amp;page={page}</code>
      </div>
      <div style={{ display: "flex", gap: 6, marginBottom: 10 }}>
        {tabs.map((t) => (
          <span key={t} style={{ flex: 1, textAlign: "center", padding: "7px 4px", borderRadius: 6, fontSize: 11, fontWeight: 600, background: t === tab ? accent : "#24143010" }}>{t[0].toUpperCase() + t.slice(1)}</span>
        ))}
      </div>
      <p style={{ margin: 0, fontSize: 10, color: "#24143099" }}>Refreshing, sharing or bookmarking this link reproduces exactly this view &mdash; the state lives in the URL, not in memory.</p>
    </div>
  );
}