Changelog

1export interface ChangelogProps {
2  version: string;
3  date: string;
4  title: string;
5  items: string[];
6  brand: string;
7  logo?: string;
8}
9 
10export const Changelog = ({
11  version,
12  date,
13  title,
14  items,
15  brand,
16  logo = "",
17}: ChangelogProps) => (
18  <div
19    style={{
20      backgroundColor: "#0a0a0a",
21      backgroundImage:
22        "radial-gradient(circle at 100% 0%, rgba(52,211,153,0.16), transparent 50%)",
23      color: "#fafafa",
24      display: "flex",
25      flexDirection: "column",
26      height: "100%",
27      padding: "80px",
28      width: "100%",
29    }}
30  >
31    <div style={{ alignItems: "center", display: "flex", gap: "20px" }}>
32      <div
33        style={{
34          alignItems: "center",
35          backgroundColor: "rgba(52,211,153,0.15)",
36          borderRadius: "999px",
37          color: "#34d399",
38          display: "flex",
39          fontSize: "28px",
40          fontWeight: 700,
41          gap: "8px",
42          padding: "10px 22px",
43        }}
44      >
45        {logo ? (
46          <img
47            alt=""
48            height={20}
49            src={logo}
50            width={20}
51            style={{
52              borderRadius: "4px",
53              objectFit: "contain",
54            }}
55          />
56        ) : null}
57        {version}
58      </div>
59      <div style={{ color: "#a1a1aa", display: "flex", fontSize: "28px" }}>
60        {date}
61      </div>
62    </div>
63 
64    <div
65      style={{
66        display: "flex",
67        fontSize: "80px",
68        fontWeight: 700,
69        letterSpacing: "-0.03em",
70        marginTop: "32px",
71      }}
72    >
73      {title}
74    </div>
75 
76    <div
77      style={{
78        display: "flex",
79        flexDirection: "column",
80        gap: "22px",
81        marginTop: "44px",
82      }}
83    >
84      {items.slice(0, 4).map((item) => (
85        <div
86          key={item}
87          style={{ alignItems: "center", display: "flex", gap: "20px" }}
88        >
89          <div
90            style={{
91              alignItems: "center",
92              backgroundColor: "rgba(52,211,153,0.15)",
93              borderRadius: "999px",
94              display: "flex",
95              height: "40px",
96              justifyContent: "center",
97              width: "40px",
98            }}
99          >
100            <svg
101              fill="none"
102              height="22"
103              stroke="#34d399"
104              strokeLinecap="round"
105              strokeLinejoin="round"
106              strokeWidth="3"
107              viewBox="0 0 24 24"
108              width="22"
109            >
110// … truncated