Page Component

Represents an application page.

html

<div class="pagec pagec--home">
  <div class="pagec__chrome"><span></span><span></span><span></span><span class="pagec__url">Atlas.app/home</span></div>
  <div class="pagec__header" style="background:#F5C2E0;">Atlas</div>
  <div class="pagec__body pagec__body--home">Home feed</div>
  <div class="pagec__body pagec__body--settings">Settings form</div>
  <div class="pagec__body pagec__body--profile">Profile card</div>
</div>
<style>
.pagec { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 12px; width: 300px; box-sizing: border-box; overflow: hidden; border: 1.5px solid #24143020; }
.pagec__chrome { display: flex; align-items: center; gap: 5px; padding: 8px 10px; background: #24143010; }
.pagec__chrome span { width: 7px; height: 7px; border-radius: 50%; background: #24143030; display: block; }
.pagec__url { margin-left: 8px; font-size: 10px; color: #24143099; background: #ffffff; padding: 2px 8px; border-radius: 4px; }
.pagec__header { padding: 12px; font-weight: 700; }
.pagec__body { display: none; padding: 24px 12px; text-align: center; color: #24143099; }
.pagec--home .pagec__body--home, .pagec--settings .pagec__body--settings, .pagec--profile .pagec__body--profile { display: block; }
</style>

tailwind

<div class="pagectw pagectw--home font-sans text-[#241430] bg-[#FAF7F2] rounded-xl w-[300px] box-border overflow-hidden border border-[#24143020]">
  <div class="flex items-center gap-1 py-2 px-2.5 bg-[#24143010]"><span class="w-1.5 h-1.5 rounded-full bg-[#24143030] block"></span><span class="w-1.5 h-1.5 rounded-full bg-[#24143030] block"></span><span class="w-1.5 h-1.5 rounded-full bg-[#24143030] block"></span><span class="ml-2 text-[10px] text-[#24143099] bg-white py-0.5 px-2 rounded">Atlas.app/home</span></div>
  <div class="p-3 font-bold" style="background:#F5C2E0;">Atlas</div>
  <div class="pagectw__body pagectw__body--home hidden py-6 px-3 text-center text-[#24143099]">Home feed</div>
  <div class="pagectw__body pagectw__body--settings hidden py-6 px-3 text-center text-[#24143099]">Settings form</div>
  <div class="pagectw__body pagectw__body--profile hidden py-6 px-3 text-center text-[#24143099]">Profile card</div>
</div>
<style>
.pagectw--home .pagectw__body--home, .pagectw--settings .pagectw__body--settings, .pagectw--profile .pagectw__body--profile { display: block; }
</style>

react

export function PageComponent({
  route = "home",
  siteName = "Atlas",
  accent = "#F5C2E0",
  showChrome = true,
}) {
  const bodies = { home: "Home feed", settings: "Settings form", profile: "Profile card" };
  return (
    <div style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", borderRadius: 12, width: 300, boxSizing: "border-box", overflow: "hidden", border: "1.5px solid #24143020" }}>
      {showChrome && (
        <div style={{ display: "flex", alignItems: "center", gap: 5, padding: "8px 10px", background: "#24143010" }}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#24143030", display: "block" }} />
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#24143030", display: "block" }} />
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#24143030", display: "block" }} />
          <span style={{ marginLeft: 8, fontSize: 10, color: "#24143099", background: "#ffffff", padding: "2px 8px", borderRadius: 4 }}>{siteName}.app/{route}</span>
        </div>
      )}
      <div style={{ padding: 12, fontWeight: 700, background: accent }}>{siteName}</div>
      <div style={{ padding: "24px 12px", textAlign: "center", color: "#24143099" }}>{bodies[route]}</div>
    </div>
  );
}