View

A particular representation of application information.

html

<div class="uif-vw-stage" data-view="list">
  <div class="uif-vw-list"><div>Invoice 1</div><div>Invoice 2</div><div>Invoice 3</div></div>
  <div class="uif-vw-grid"><span style="background:#BFD9F2;"></span><span style="background:#BFD9F2;"></span><span style="background:#BFD9F2;"></span></div>
  <table class="uif-vw-table"><tr><th>Invoice</th><th>Amount</th></tr><tr><td>1</td><td style="color:#BFD9F2;">&pound;40</td></tr><tr><td>2</td><td style="color:#BFD9F2;">&pound;18</td></tr></table>
  <p class="uif-vw-caption">Same data, list view</p>
</div>
<style>
.uif-vw-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 12px system-ui, sans-serif; color: #241430; }
.uif-vw-list, .uif-vw-grid, .uif-vw-table { display: none; }
[data-view="list"] .uif-vw-list { display: block; }
[data-view="grid"] .uif-vw-grid { display: flex; gap: 8px; }
[data-view="table"] .uif-vw-table { display: table; width: 100%; border-collapse: collapse; }
.uif-vw-list div { padding: 6px 0; border-bottom: 1px solid #24143014; }
.uif-vw-grid span { flex: 1; height: 50px; border-radius: 8px; }
.uif-vw-table th, .uif-vw-table td { text-align: left; padding: 5px 4px; border-bottom: 1px solid #24143014; }
.uif-vw-caption { margin: 10px 0 0; font-size: 11px; color: #241430aa; }
</style>

tailwind

<div class="w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-xs text-[#241430]" data-view="list">
  <div class="tw-vw-list hidden"><div class="py-1.5 border-b border-[#24143014]">Invoice 1</div><div class="py-1.5 border-b border-[#24143014]">Invoice 2</div><div class="py-1.5 border-b border-[#24143014]">Invoice 3</div></div>
  <div class="tw-vw-grid hidden gap-2"><span class="flex-1 h-[50px] rounded-lg" style="background:#BFD9F2;"></span><span class="flex-1 h-[50px] rounded-lg" style="background:#BFD9F2;"></span><span class="flex-1 h-[50px] rounded-lg" style="background:#BFD9F2;"></span></div>
  <table class="tw-vw-table hidden w-full border-collapse"><tr><th class="text-left py-1 px-1 border-b border-[#24143014]">Invoice</th><th class="text-left py-1 px-1 border-b border-[#24143014]">Amount</th></tr><tr><td class="py-1 px-1 border-b border-[#24143014]">1</td><td class="py-1 px-1 border-b border-[#24143014]" style="color:#BFD9F2;">&pound;40</td></tr></table>
  <p class="mt-2.5 text-[11px] text-[#241430]/70">Same data, list view</p>
</div>
<style>
[data-view="list"] .tw-vw-list { display: block; }
[data-view="grid"] .tw-vw-grid { display: flex; }
[data-view="table"] .tw-vw-table { display: table; }
</style>

react

export function View({
  viewType = "list",
  itemLabel = "Invoice",
  accent = "#BFD9F2",
}) {
  return (
    <div style={{ width: "100%", maxWidth: 320, padding: 16, background: "#FAF7F2", border: "1px solid #24143022", borderRadius: 12, fontFamily: "system-ui, sans-serif", fontSize: 12, color: "#241430" }}>
      {viewType === "list" && (
        <div>{[1, 2, 3].map((n) => (<div key={n} style={{ padding: "6px 0", borderBottom: "1px solid #24143014" }}>{itemLabel} {n}</div>))}</div>
      )}
      {viewType === "grid" && (
        <div style={{ display: "flex", gap: 8 }}>{[1, 2, 3].map((n) => (<span key={n} style={{ flex: 1, height: 50, borderRadius: 8, background: accent }} />))}</div>
      )}
      {viewType === "table" && (
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <tbody>
            <tr><th style={{ textAlign: "left", padding: "5px 4px", borderBottom: "1px solid #24143014" }}>{itemLabel}</th><th style={{ textAlign: "left", padding: "5px 4px", borderBottom: "1px solid #24143014" }}>Amount</th></tr>
            <tr><td style={{ padding: "5px 4px", borderBottom: "1px solid #24143014" }}>1</td><td style={{ padding: "5px 4px", borderBottom: "1px solid #24143014", color: accent }}>&pound;40</td></tr>
          </tbody>
        </table>
      )}
      <p style={{ margin: "10px 0 0", fontSize: 11, color: "#241430aa" }}>Same data, {viewType} view</p>
    </div>
  );
}