Event

1export interface EventProps {
2  label: string;
3  brand: string;
4  title: string;
5  date: string;
6  location: string;
7  logo?: string;
8}
9 
10export const Event = ({
11  label,
12  brand,
13  title,
14  date,
15  location,
16  logo = "",
17}: EventProps) => (
18  <div
19    style={{
20      backgroundColor: "#0a0a0a",
21      backgroundImage:
22        "radial-gradient(circle at 100% 0%, rgba(245,158,11,0.2), transparent 55%)",
23      color: "#fafafa",
24      display: "flex",
25      flexDirection: "column",
26      height: "100%",
27      justifyContent: "space-between",
28      padding: "80px",
29      width: "100%",
30    }}
31  >
32    <div
33      style={{
34        alignItems: "center",
35        display: "flex",
36        justifyContent: "space-between",
37      }}
38    >
39      <div
40        style={{
41          alignItems: "center",
42          backgroundColor: "rgba(245,158,11,0.15)",
43          border: "1px solid rgba(245,158,11,0.4)",
44          borderRadius: "999px",
45          color: "#f59e0b",
46          display: "flex",
47          fontSize: "26px",
48          fontWeight: 600,
49          gap: "12px",
50          letterSpacing: "0.04em",
51          padding: "10px 22px",
52          textTransform: "uppercase",
53        }}
54      >
55        <div
56          style={{
57            backgroundColor: "#f59e0b",
58            borderRadius: "999px",
59            height: "12px",
60            width: "12px",
61          }}
62        />
63        {label}
64      </div>
65      <div
66        style={{
67          alignItems: "center",
68          display: "flex",
69          gap: "12px",
70        }}
71      >
72        {logo ? (
73          <img
74            alt=""
75            height={40}
76            src={logo}
77            width={40}
78            style={{
79              borderRadius: "8px",
80              objectFit: "contain",
81            }}
82          />
83        ) : (
84          <div
85            style={{
86              alignItems: "center",
87              backgroundColor: "#f59e0b",
88              borderRadius: "8px",
89              color: "#0a0a0a",
90              display: "flex",
91              fontSize: "20px",
92              fontWeight: 700,
93              height: "40px",
94              justifyContent: "center",
95              width: "40px",
96            }}
97          />
98        )}
99        <div
100          style={{
101            color: "#a1a1aa",
102            fontSize: "28px",
103            fontWeight: 600,
104          }}
105        >
106          {brand}
107        </div>
108      </div>
109    </div>
110 
111    <div
112      style={{
113        display: "flex",
114        fontSize: title.length > 40 ? 72 : 88,
115// … truncated