demeter

Autonomous Hydroponic Intelligence
git clone https://github.com/maydayv7/demeter

EmptyState.jsx (1468B)

 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
export default function EmptyState({
  icon: Icon,
  title,
  description,
  style = {},
  className = "",
}) {
  return (
    <div
      className={className}
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        height: "100%",
        gap: 16,
        padding: 40,
        ...style,
      }}
    >
      {Icon && (
        <div
          style={{
            width: 64,
            height: 64,
            borderRadius: 20,
            background: "rgba(74,222,128,0.06)",
            border: "1px solid rgba(74,222,128,0.15)",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <Icon size={28} style={{ color: "var(--green)" }} />
        </div>
      )}
      <div style={{ textAlign: "center" }}>
        {title && (
          <div
            style={{
              fontWeight: 700,
              fontSize: 15,
              color: "var(--text-2)",
              marginBottom: 8,
            }}
          >
            {title}
          </div>
        )}
        {description && (
          <div
            style={{
              fontSize: 13,
              color: "var(--text-3)",
              maxWidth: 300,
              lineHeight: 1.5,
              margin: "0 auto",
            }}
          >
            {description}
          </div>
        )}
      </div>
    </div>
  );
}