demeter

 1export default function EmptyState({
 2  icon: Icon,
 3  title,
 4  description,
 5  style = {},
 6  className = "",
 7}) {
 8  return (
 9    <div
10      className={className}
11      style={{
12        display: "flex",
13        flexDirection: "column",
14        alignItems: "center",
15        justifyContent: "center",
16        height: "100%",
17        gap: 16,
18        padding: 40,
19        ...style,
20      }}
21    >
22      {Icon && (
23        <div
24          style={{
25            width: 64,
26            height: 64,
27            borderRadius: 20,
28            background: "rgba(74,222,128,0.06)",
29            border: "1px solid rgba(74,222,128,0.15)",
30            display: "flex",
31            alignItems: "center",
32            justifyContent: "center",
33          }}
34        >
35          <Icon size={28} style={{ color: "var(--green)" }} />
36        </div>
37      )}
38      <div style={{ textAlign: "center" }}>
39        {title && (
40          <div
41            style={{
42              fontWeight: 700,
43              fontSize: 15,
44              color: "var(--text-2)",
45              marginBottom: 8,
46            }}
47          >
48            {title}
49          </div>
50        )}
51        {description && (
52          <div
53            style={{
54              fontSize: 13,
55              color: "var(--text-3)",
56              maxWidth: 300,
57              lineHeight: 1.5,
58              margin: "0 auto",
59            }}
60          >
61            {description}
62          </div>
63        )}
64      </div>
65    </div>
66  );
67}