Toast Notification Stack

const styles = {
  success: "border-emerald-200 bg-emerald-50 text-emerald-800",
  error: "border-rose-200 bg-rose-50 text-rose-800",
  info: "border-sky-200 bg-sky-50 text-sky-800",
};

export function ToastStack({ toasts }) {
  return (
    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2">
      {toasts.map((t) => (
        <div
          key={t.id}
          className={`w-80 rounded-lg border px-4 py-3 text-sm font-medium shadow-md
            animate-in slide-in-from-bottom-2 ${styles[t.type]}`}
        >
          {t.message}
        </div>
      ))}
    </div>
  );
}