Stat

1export interface StatProps {
2  label: string;
3  value: string;
4  caption: string;
5  trend?: string;
6  brand: string;
7  logo?: string;
8}
9 
10export const Stat = ({
11  label,
12  value,
13  caption,
14  trend,
15  brand,
16  logo,
17}: StatProps) => (
18  <div
19    style={{
20      backgroundColor: "#09090b",
21      backgroundImage:
22        "radial-gradient(circle at 50% 120%, rgba(34,197,94,0.18), transparent 55%)",
23      color: "#fafafa",
24      display: "flex",
25      flexDirection: "column",
26      height: "100%",
27      justifyContent: "center",
28      padding: "96px",
29      width: "100%",
30    }}
31  >
32    <div
33      style={{
34        color: "#a1a1aa",
35        display: "flex",
36        fontSize: "30px",
37        fontWeight: 600,
38        letterSpacing: "0.04em",
39        textTransform: "uppercase",
40      }}
41    >
42      {label}
43    </div>
44 
45    <div
46      style={{
47        alignItems: "flex-end",
48        display: "flex",
49        gap: "28px",
50        marginTop: "20px",
51      }}
52    >
53      <div
54        style={{
55          display: "flex",
56          fontSize: "200px",
57          fontWeight: 800,
58          letterSpacing: "-0.04em",
59          lineHeight: 1,
60        }}
61      >
62        {value}
63      </div>
64      {trend ? (
65        <div
66          style={{
67            alignItems: "center",
68            backgroundColor: "rgba(34,197,94,0.15)",
69            borderRadius: "999px",
70            color: "#22c55e",
71            display: "flex",
72            fontSize: "34px",
73            fontWeight: 700,
74            gap: "10px",
75            marginBottom: "36px",
76            padding: "10px 22px",
77          }}
78        >
79          <svg
80            fill="none"
81            height="26"
82            stroke="#22c55e"
83            strokeLinecap="round"
84            strokeLinejoin="round"
85            strokeWidth="3"
86            viewBox="0 0 24 24"
87            width="26"
88          >
89            <path d="M7 17 17 7M9 7h8v8" />
90          </svg>
91          {trend}
92        </div>
93      ) : null}
94    </div>
95 
96    <div
97      style={{
98        color: "#d4d4d8",
99        display: "flex",
100        fontSize: "34px",
101        lineHeight: 1.4,
102        marginTop: "28px",
103        maxWidth: "820px",
104      }}
105    >
106      {caption}
107    </div>
108 
109    <div
110      style={{
111        alignItems: "center",
112        bottom: "56px",
113        color: "#71717a",
114        display: "flex",
115        fontSize: "26px",
116        fontWeight: 600,
117        gap: "12px",
118        position: "absolute",
119      }}
120    >
121      {logo ? (
122        <img
123          alt=""
124// … truncated