Quote

1export interface QuoteProps {
2  quote: string;
3  author: string;
4  handle: string;
5  avatar?: string;
6}
7 
8const initials = (name: string) =>
9  name
10    .split(" ")
11    .map((part) => part.charAt(0))
12    .slice(0, 2)
13    .join("")
14    .toUpperCase();
15 
16export const Quote = ({ quote, author, handle, avatar }: QuoteProps) => (
17  <div
18    style={{
19      backgroundColor: "#18181b",
20      color: "#fafafa",
21      display: "flex",
22      flexDirection: "column",
23      height: "100%",
24      justifyContent: "center",
25      padding: "96px",
26      width: "100%",
27    }}
28  >
29    <div
30      style={{
31        color: "#f472b6",
32        display: "flex",
33        fontSize: "140px",
34        fontWeight: 800,
35        lineHeight: 0.8,
36      }}
37    >
38      &ldquo;
39    </div>
40 
41    <div
42      style={{
43        display: "flex",
44        fontSize: quote.length > 90 ? 52 : 64,
45        fontWeight: 600,
46        letterSpacing: "-0.02em",
47        lineHeight: 1.2,
48        marginTop: "8px",
49        maxWidth: "1000px",
50      }}
51    >
52      {quote}
53    </div>
54 
55    <div
56      style={{
57        alignItems: "center",
58        display: "flex",
59        gap: "20px",
60        marginTop: "56px",
61      }}
62    >
63      {avatar ? (
64        <img
65          alt={author}
66          src={avatar}
67          width={76}
68          height={76}
69          style={{ borderRadius: "999px" }}
70        />
71      ) : (
72        <div
73          style={{
74            alignItems: "center",
75            backgroundColor: "#f472b6",
76            borderRadius: "999px",
77            color: "#18181b",
78            display: "flex",
79            fontSize: "32px",
80            fontWeight: 700,
81            height: "76px",
82            justifyContent: "center",
83            width: "76px",
84          }}
85        >
86          {initials(author)}
87        </div>
88      )}
89      <div style={{ display: "flex", flexDirection: "column" }}>
90        <div style={{ display: "flex", fontSize: "32px", fontWeight: 600 }}>
91          {author}
92        </div>
93        <div style={{ color: "#a1a1aa", display: "flex", fontSize: "26px" }}>
94          {handle}
95        </div>
96      </div>
97    </div>
98  </div>
99);