Swadhin Biswas Ci/improve release notes (#41) · 8/28/2026
04d550f
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
import { CheckCircle2, AlertCircle, Info, X } from "lucide-react";
import React, { useEffect } from "react";
export interface ToastMessage {
id: string;
type: "success" | "error" | "info";
title: string;
message?: string;
}
interface ToastProps {
toasts: ToastMessage[];
onDismiss: (id: string) => void;
}
const ToastContainer: React.FC<ToastProps> = ({ toasts, onDismiss }) => {
return (
<div
style={{
position: "fixed",
bottom: 24,
right: 24,
zIndex: 50,
display: "flex",
flexDirection: "column",
gap: "10px",
pointerEvents: "none",
maxWidth: "380px",
width: "100%",
}}
>
{toasts.map((toast) => (
<ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />
))}
</div>
);
};
const ToastItem: React.FC<{ toast: ToastMessage; onDismiss: (id: string) => void }> = ({
toast,
onDismiss,
}) => {
useEffect(() => {
const timer = setTimeout(() => {
onDismiss(toast.id);
}, 4500);
return () => clearTimeout(timer);
}, [toast.id, onDismiss]);
const getIcon = () => {
switch (toast.type) {
case "success":
return <CheckCircle2 size={18} color="var(--accent-color)" />;
case "error":
return <AlertCircle size={18} color="var(--danger-color)" />;
default:
return <Info size={18} color="var(--info-color)" />;
}
};
const getBorderColor = () => {
switch (toast.type) {
case "success":
return "var(--accent-color)";
case "error":
return "var(--danger-color)";
default:
return "var(--info-color)";
}
};
return (
<div
className="animate-fade-in"
style={{
pointerEvents: "auto",
background: "var(--bg-card)",
border: `1px solid var(--border-color)`,
borderLeft: `4px solid ${getBorderColor()}`,
borderRadius: "10px",
padding: "12px 16px",
boxShadow: "var(--shadow-card)",
display: "flex",
alignItems: "flex-start",
gap: "12px",
}}
>
<div style={{ marginTop: "2px" }}>{getIcon()}</div>
<div style={{ flex: 1 }}>
<div style={{ fontWeight: 600, fontSize: "14px", color: "var(--text-primary)" }}>
{toast.title}
</div>
{toast.message && (
<div style={{ fontSize: "12px", color: "var(--text-secondary)", marginTop: "2px" }}>
{toast.message}
</div>
)}
</div>
<button
onClick={() => onDismiss(toast.id)}
style={{
background: "none",
border: "none",
color: "var(--text-muted)",
cursor: "pointer",
padding: "2px",
display: "flex",
alignItems: "center",
}}
aria-label="Dismiss notification"
>
<X size={14} />
</button>
</div>
);
};
export default ToastContainer;