Rich colors for Sonner toasts

import { useEffect, useState } from "react";
import { Toaster, toast } from "sonner";

const fire = {
  success: () => toast.success("Event has been created"),
  error: () => toast.error("Event has not been created"),
  info: () => toast.info("Be at the area 10 minutes before the event time"),
  warning: () => toast.warning("Event start time cannot be earlier than 8am"),
};

const S = {
  page: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "flex-start", paddingLeft: 40, background: "#111", fontFamily: "system-ui, sans-serif" },
  card: { width: 240, background: "#fff", color: "#1f2937", borderRadius: 14, padding: 18, boxShadow: "0 10px 30px rgba(0,0,0,.5)" },
  btn: { display: "block", width: "100%", margin: "6px 0", padding: "9px 0", border: "1px solid #e5e7eb", borderRadius: 8, background: "#f9fafb", fontSize: 14, fontWeight: 600, cursor: "pointer" },
};

export default function App() {
  const [rich, setRich] = useState(true);

  useEffect(() => {
    const ids = [fire.success, fire.error].map((f, i) => setTimeout(f, 300 + i * 400));
    return () => ids.forEach(clearTimeout);
  }, []);

  return (
    <div style={S.page}>
      {/* toggle richColors to compare both styles */}
      <Toaster richColors={rich} expand />
      <div style={S.card}>
        <label style={{ display: "flex", gap: 8, fontWeight: 600, marginBottom: 8 }}>
          <input type="checkbox" checked={rich} onChange={(e) => setRich(e.target.checked)} />
          richColors
        </label>
        {Object.entries(fire).map(([type, f]) => (
          <button key={type} style={S.btn} onClick={f}>toast.{type}()</button>
        ))}
      </div>
    </div>
  );
}