Poor Empty State

html

<div class="pe-demo" style="--accent:#F5C2E0;">
  <span class="pe-demo__badge">{{unless fixed}}&#10007; Anti-pattern: poor empty state

tailwind

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

react

export function PoorEmptyState({
  message = "No data",
  fixed = false,
  ctaLabel = "Create your first project",
  accent = "#F5C2E0",
}) {
  return (
    <div style={{ width: 280, 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: poor empty state"}
      </span>
      {!fixed && <div style={{ padding: "40px 16px", textAlign: "center", color: "#241430aa", border: "1px solid #24143014" }}><p style={{ margin: 0 }}>{message}</p></div>}
      {fixed && (
        <div style={{ padding: "30px 20px", textAlign: "center", borderRadius: 12, background: "#24143008", color: accent }}>
          <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="3" /><path d="M9 12h6M12 9v6" /></svg>
          <p style={{ margin: "10px 0 4px", fontWeight: 700, color: "#241430", fontSize: 15 }}>{message}</p>
          <p style={{ margin: "0 0 14px", fontSize: 12, color: "#241430aa" }}>Projects keep your work organised by client.</p>
          <button type="button" style={{ border: "none", borderRadius: 8, padding: "10px 18px", background: accent, color: "#241430", fontWeight: 700, cursor: "pointer" }}>{ctaLabel}</button>
        </div>
      )}
    </div>
  );
}