Sample Data

Placeholder content demonstrating the product.

html

<div class="sd sd--table" style="--accent:#F5C2E0;">
  <div class="sd__head">
    <div>
      <h3 class="sd__title">Try it with sample data</h3>
      <p class="sd__desc">Explore the dashboard instantly — no setup required.</p>
    </div>
    <span class="sd__badge">Demo: Q3 Sales</span>
  </div>
  <table class="sd__table">
    <thead><tr><th>Region</th><th>Revenue</th><th>Growth</th></tr></thead>
    <tbody>
      <tr><td>North</td><td>£48,200</td><td>+12%</td></tr>
      <tr><td>South</td><td>£31,900</td><td>+4%</td></tr>
      <tr><td>East</td><td>£55,600</td><td>+18%</td></tr>
    </tbody>
  </table>
  <div class="sd__chart">
    <span class="sd__bar" style="height:52%;"></span>
    <span class="sd__bar" style="height:78%;"></span>
    <span class="sd__bar" style="height:36%;"></span>
    <span class="sd__bar" style="height:90%;"></span>
  </div>
  <div class="sd__cards">
    <div class="sd__card"><p class="sd__card-label">Revenue</p><p class="sd__card-value">£135.7k</p></div>
    <div class="sd__card"><p class="sd__card-label">Orders</p><p class="sd__card-value">1,204</p></div>
    <div class="sd__card"><p class="sd__card-label">Growth</p><p class="sd__card-value">+11%</p></div>
  </div>
  <button type="button" class="sd__action">Load sample data →</button>
</div>
<style>
.sd { font: 16px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; max-width: 380px; border-radius: 14px; border: 1px solid #24143018; }
.sd__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.sd__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.sd__desc { margin: 0; font-size: 12px; color: #241430b3; }
.sd__badge { flex-shrink: 0; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--accent); white-space: nowrap; }
.sd__table, .sd__chart, .sd__cards { display: none; }
.sd--table .sd__table { display: table; width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 14px; }
.sd__table th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: #24143090; padding: 4px 6px; border-bottom: 1.5px solid #24143018; }
.sd__table td { padding: 6px; border-bottom: 1px solid #24143012; }
.sd--chart .sd__chart { display: flex; align-items: flex-end; gap: 8px; height: 80px; margin-bottom: 14px; }
.sd__bar { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; }
.sd--cards .sd__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.sd__card { background: #fff; border-radius: 10px; padding: 10px; }
.sd__card-label { margin: 0 0 2px; font-size: 10px; color: #24143090; }
.sd__card-value { margin: 0; font-size: 15px; font-weight: 700; }
.sd__action { width: 100%; background: var(--accent); border: 1.5px solid var(--accent); border-radius: 8px; padding: 9px; font-size: 13px; font-weight: 600; cursor: pointer; }
</style>

tailwind

<div class="sd-tw sd-tw--table max-w-[380px] p-5 rounded-2xl border border-[#24143018] bg-[#FAF7F2] text-[#241430] font-sans" style="--accent:#F5C2E0">
  <div class="flex justify-between items-start gap-2.5 mb-3.5">
    <div>
      <h3 class="m-0 mb-1 text-[15px] font-bold">Try it with sample data</h3>
      <p class="m-0 text-xs text-[#241430]/70">Explore the dashboard instantly — no setup required.</p>
    </div>
    <span class="shrink-0 text-[10.5px] font-bold px-2.5 py-0.5 rounded-full whitespace-nowrap" style="background:#F5C2E0">Demo: Q3 Sales</span>
  </div>
  <table class="sd-tw__table hidden w-full border-collapse text-xs mb-3.5">
    <thead><tr><th class="text-left text-[10.5px] uppercase text-[#24143090] px-1.5 py-1 border-b-[1.5px] border-[#24143018]">Region</th><th class="text-left text-[10.5px] uppercase text-[#24143090] px-1.5 py-1 border-b-[1.5px] border-[#24143018]">Revenue</th><th class="text-left text-[10.5px] uppercase text-[#24143090] px-1.5 py-1 border-b-[1.5px] border-[#24143018]">Growth</th></tr></thead>
    <tbody>
      <tr><td class="px-1.5 py-1.5 border-b border-[#24143012]">North</td><td class="px-1.5 py-1.5 border-b border-[#24143012]">£48,200</td><td class="px-1.5 py-1.5 border-b border-[#24143012]">+12%</td></tr>
      <tr><td class="px-1.5 py-1.5 border-b border-[#24143012]">South</td><td class="px-1.5 py-1.5 border-b border-[#24143012]">£31,900</td><td class="px-1.5 py-1.5 border-b border-[#24143012]">+4%</td></tr>
      <tr><td class="px-1.5 py-1.5 border-b border-[#24143012]">East</td><td class="px-1.5 py-1.5 border-b border-[#24143012]">£55,600</td><td class="px-1.5 py-1.5 border-b border-[#24143012]">+18%</td></tr>
    </tbody>
  </table>
  <div class="sd-tw__chart hidden items-end gap-2 h-20 mb-3.5">
    <span class="flex-1 rounded-t" style="background:#F5C2E0;height:52%"></span>
    <span class="flex-1 rounded-t" style="background:#F5C2E0;height:78%"></span>
    <span class="flex-1 rounded-t" style="background:#F5C2E0;height:36%"></span>
    <span class="flex-1 rounded-t" style="background:#F5C2E0;height:90%"></span>
  </div>
  <div class="sd-tw__cards hidden grid-cols-3 gap-2 mb-3.5">
    <div class="bg-white rounded-lg p-2.5"><p class="m-0 mb-0.5 text-[10px] text-[#24143090]">Revenue</p><p class="m-0 text-[15px] font-bold">£135.7k</p></div>
    <div class="bg-white rounded-lg p-2.5"><p class="m-0 mb-0.5 text-[10px] text-[#24143090]">Orders</p><p class="m-0 text-[15px] font-bold">1,204</p></div>
    <div class="bg-white rounded-lg p-2.5"><p class="m-0 mb-0.5 text-[10px] text-[#24143090]">Growth</p><p class="m-0 text-[15px] font-bold">+11%</p></div>
  </div>
  <button type="button" class="w-full rounded-lg py-2.5 text-sm font-semibold" style="background:#F5C2E0;border:1.5px solid #F5C2E0">Load sample data →</button>
</div>
<style>
.sd-tw--table .sd-tw__table { display: table; }
.sd-tw--chart .sd-tw__chart { display: flex; }
.sd-tw--cards .sd-tw__cards { display: grid; }
</style>

react

export function SampleData({
  title = "Try it with sample data",
  description = "Explore the dashboard instantly — no setup required.",
  datasetName = "Demo: Q3 Sales",
  style = "table",
  accent = "#F5C2E0",
}) {
  const rows = [
    ["North", "£48,200", "+12%"],
    ["South", "£31,900", "+4%"],
    ["East", "£55,600", "+18%"],
  ];
  const bars = [52, 78, 36, 90];
  const cards = [
    ["Revenue", "£135.7k"],
    ["Orders", "1,204"],
    ["Growth", "+11%"],
  ];
  return (
    <div style={{ font: "16px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, maxWidth: 380, borderRadius: 14, border: "1px solid #24143018" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 10, marginBottom: 14 }}>
        <div>
          <h3 style={{ margin: "0 0 4px", fontSize: 15, fontWeight: 700 }}>{title}</h3>
          <p style={{ margin: 0, fontSize: 12, color: "#241430b3" }}>{description}</p>
        </div>
        <span style={{ flexShrink: 0, fontSize: 10.5, fontWeight: 700, padding: "3px 9px", borderRadius: 999, background: accent, whiteSpace: "nowrap" }}>{datasetName}</span>
      </div>
      {style === "table" && (
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 12, marginBottom: 14 }}>
          <thead>
            <tr>
              {["Region", "Revenue", "Growth"].map((h) => (
                <th key={h} style={{ textAlign: "left", fontSize: 10.5, textTransform: "uppercase", color: "#24143090", padding: "4px 6px", borderBottom: "1.5px solid #24143018" }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r) => (
              <tr key={r[0]}>
                {r.map((cell, i) => (
                  <td key={i} style={{ padding: 6, borderBottom: "1px solid #24143012" }}>{cell}</td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      )}
      {style === "chart" && (
        <div style={{ display: "flex", alignItems: "flex-end", gap: 8, height: 80, marginBottom: 14 }}>
          {bars.map((h, i) => (
            <span key={i} style={{ flex: 1, background: accent, borderRadius: "4px 4px 0 0", height: h + "%" }} />
          ))}
        </div>
      )}
      {style === "cards" && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 14 }}>
          {cards.map(([label, value]) => (
            <div key={label} style={{ background: "#fff", borderRadius: 10, padding: 10 }}>
              <p style={{ margin: "0 0 2px", fontSize: 10, color: "#24143090" }}>{label}</p>
              <p style={{ margin: 0, fontSize: 15, fontWeight: 700 }}>{value}</p>
            </div>
          ))}
        </div>
      )}
      <button type="button" style={{ width: "100%", background: accent, border: "1.5px solid " + accent, borderRadius: 8, padding: 9, fontSize: 13, fontWeight: 600, cursor: "pointer" }}>Load sample data →</button>
    </div>
  );
}