Page

A complete web application route/view.

html

<div class="uif-pg-stage" data-layout="standard">
  <div class="uif-pg-bar">/dashboard</div>
  <div class="uif-pg-header" style="background:#D9C8F0;">header</div>
  <div class="uif-pg-body">
    <div class="uif-pg-side">nav</div>
    <div class="uif-pg-main">main content</div>
  </div>
  <div class="uif-pg-footer">footer</div>
</div>
<style>
.uif-pg-stage { width: 100%; max-width: 320px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; overflow: hidden; font: 11px system-ui, sans-serif; color: #241430aa; }
.uif-pg-bar { padding: 4px 10px; background: #24143011; font-size: 10px; }
.uif-pg-header { padding: 10px; text-align: center; color: #241430; font-weight: 600; }
.uif-pg-body { display: flex; min-height: 70px; }
.uif-pg-side { display: none; width: 60px; background: #24143011; padding: 10px; box-sizing: border-box; }
[data-layout="with-sidebar"] .uif-pg-side { display: block; }
.uif-pg-main { flex: 1; padding: 10px; background: #fff; }
.uif-pg-footer { padding: 8px 10px; background: #24143011; text-align: center; }
</style>

tailwind

<div class="w-full max-w-[320px] bg-[#FAF7F2] border border-[#24143022] rounded-xl overflow-hidden font-sans text-[11px] text-[#241430]/70" data-layout="standard">
  <div class="px-2.5 py-1 bg-[#24143011] text-[10px]">/dashboard</div>
  <div class="p-2.5 text-center font-semibold text-[#241430]" style="background:#D9C8F0;">header</div>
  <div class="flex min-h-[70px]">
    <div class="tw-pg-side hidden w-[60px] bg-[#24143011] p-2.5 box-border">nav</div>
    <div class="flex-1 p-2.5 bg-white">main content</div>
  </div>
  <div class="px-2.5 py-2 bg-[#24143011] text-center">footer</div>
</div>
<style>
[data-layout="with-sidebar"] .tw-pg-side { display: block; }
</style>

react

export function Page({
  layout = "standard",
  title = "/dashboard",
  showLabels = true,
  accent = "#D9C8F0",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, overflow: "hidden", fontFamily: "system-ui, sans-serif", fontSize: 11, color: "#241430aa" }}>
      <div style={{ padding: "4px 10px", background: "#24143011", fontSize: 10 }}>{title}</div>
      <div style={{ padding: 10, textAlign: "center", color: "#241430", fontWeight: 600, background: accent }}>{showLabels && "header"}</div>
      <div style={{ display: "flex", minHeight: 70 }}>
        {layout === "with-sidebar" && <div style={{ width: 60, background: "#24143011", padding: 10, boxSizing: "border-box" }}>{showLabels && "nav"}</div>}
        <div style={{ flex: 1, padding: 10, background: "#fff" }}>{showLabels && "main content"}</div>
      </div>
      <div style={{ padding: "8px 10px", background: "#24143011", textAlign: "center" }}>{showLabels && "footer"}</div>
    </div>
  );
}