Blog

1export interface BlogProps {
2  category: string;
3  title: string;
4  excerpt: string;
5  author: string;
6  meta: string;
7  avatar?: string;
8  brand: string;
9  logo?: string;
10}
11 
12const initials = (name: string) =>
13  name
14    .split(" ")
15    .map((part) => part.charAt(0))
16    .slice(0, 2)
17    .join("")
18    .toUpperCase();
19 
20export const Blog = ({
21  category,
22  title,
23  excerpt,
24  author,
25  meta,
26  avatar,
27  brand,
28  logo,
29}: BlogProps) => (
30  <div
31    style={{
32      backgroundColor: "#ffffff",
33      color: "#0a0a0a",
34      display: "flex",
35      flexDirection: "column",
36      height: "100%",
37      justifyContent: "space-between",
38      padding: "80px",
39      position: "relative",
40      width: "100%",
41    }}
42  >
43    <div
44      style={{
45        alignSelf: "flex-start",
46        backgroundColor: "rgba(124,58,237,0.15)",
47        borderRadius: "999px",
48        color: "#7c3aed",
49        display: "flex",
50        fontSize: "26px",
51        fontWeight: 600,
52        letterSpacing: "0.02em",
53        padding: "10px 22px",
54        textTransform: "uppercase",
55      }}
56    >
57      {category}
58    </div>
59 
60    <div style={{ display: "flex", flexDirection: "column" }}>
61      <div
62        style={{
63          display: "flex",
64          fontSize: title.length > 48 ? 64 : 78,
65          fontWeight: 700,
66          letterSpacing: "-0.03em",
67          lineHeight: 1.05,
68          maxWidth: "1000px",
69        }}
70      >
71        {title}
72      </div>
73      <div
74        style={{
75          color: "#52525b",
76          display: "flex",
77          fontSize: "34px",
78          lineHeight: 1.4,
79          marginTop: "28px",
80          maxWidth: "920px",
81        }}
82      >
83        {excerpt}
84      </div>
85    </div>
86 
87    <div style={{ alignItems: "center", display: "flex", gap: "20px" }}>
88      {avatar ? (
89        <img
90          alt={author}
91          src={avatar}
92          width={72}
93          height={72}
94          style={{ borderRadius: "999px" }}
95        />
96      ) : (
97        <div
98          style={{
99            alignItems: "center",
100            backgroundColor: "#7c3aed",
101            borderRadius: "999px",
102            color: "#ffffff",
103            display: "flex",
104            fontSize: "30px",
105            fontWeight: 700,
106            height: "72px",
107            justifyContent: "center",
108            width: "72px",
109          }}
110        >
111          {initials(author)}
112        </div>
113      )}
114      <div style={{ display: "flex", flexDirection: "column" }}>
115// … truncated