Overloaded Dashboard

html

<div class="od-demo" style="--accent:#A8E6C1;">
  <span class="od-demo__badge">{{unless fixed}}&#10007; Anti-pattern: overloaded dashboard

tailwind

<div style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <span class="od-tw-badge inline-block px-2.5 py-0.5 rounded-full text-[11px] font-bold mb-2.5">{{unless fixed}}&#10007; Anti-pattern: overloaded dashboard

react

export function OverloadedDashboard({
  title = "Overview",
  fixed = false,
  accent = "#A8E6C1",
}) {
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <span style={{ display: "inline-block", padding: "3px 10px", borderRadius: 999, fontSize: 11, fontWeight: 700, marginBottom: 10, background: fixed ? "#1a7a44" : "#b3261e", color: "#FAF7F2" }}>
        {fixed ? "\u2713 Better" : "\u2717 Anti-pattern: overloaded dashboard"}
      </span>
      <p style={{ margin: "0 0 8px", fontWeight: 700 }}>{title}</p>
      {!fixed && (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 5 }}>
          {Array.from({ length: 9 }).map((_, i) => <div key={i} style={{ height: 30, borderRadius: 5, background: "#24143014" }} />)}
        </div>
      )}
      {fixed && (
        <>
          <div style={{ padding: 16, borderRadius: 10, background: accent, display: "flex", flexDirection: "column", gap: 4, fontWeight: 600 }}>
            Revenue this month<strong style={{ fontSize: 22 }}>$84,200</strong>
          </div>
          <div style={{ display: "flex", gap: 6, marginTop: 6 }}>
            <div style={{ flex: 1, height: 40, borderRadius: 8, background: "#24143010" }} />
            <div style={{ flex: 1, height: 40, borderRadius: 8, background: "#24143010" }} />
          </div>
          <a href="#" style={{ display: "block", marginTop: 8, fontSize: 12, color: accent, fontWeight: 700 }}>View all metrics &rarr;</a>
        </>
      )}
    </div>
  );
}