Shadcn Registry 4

1export interface ShadcnRegistry4Props {
2  name: string;
3  title: string;
4  url?: string;
5  logo?: string;
6}
7 
8export const ShadcnRegistry4 = ({
9  name,
10  title,
11  url = "",
12  logo = "",
13}: ShadcnRegistry4Props) => (
14  <div
15    style={{
16      alignItems: "center",
17      backgroundColor: "#0a0a0a",
18      backgroundImage:
19        "radial-gradient(ellipse at 50% 100%, rgba(255,255,255,0.1), transparent 70%)",
20      backgroundSize: "100% 100%",
21      color: "#fafafa",
22      display: "flex",
23      flexDirection: "column",
24      height: "100%",
25      justifyContent: "center",
26      padding: "80px",
27      position: "relative",
28      width: "100%",
29    }}
30  >
31    {/* Logo + Name */}
32    <div
33      style={{
34        alignItems: "center",
35        display: "flex",
36        gap: "16px",
37        marginBottom: "48px",
38      }}
39    >
40      {logo ? (
41        <img
42          height={56}
43          src={logo}
44          width={56}
45          style={{ objectFit: "contain" }}
46        />
47      ) : (
48        <div
49          style={{
50            backgroundColor: "rgba(255,255,255,0.3)",
51            borderRadius: "12px",
52            height: "56px",
53            width: "56px",
54          }}
55        />
56      )}
57      <div
58        style={{ fontSize: "40px", fontWeight: 600, letterSpacing: "-0.02em" }}
59      >
60        {name}
61      </div>
62    </div>
63 
64    {/* Title with alternating word colors */}
65    <div
66      style={{
67        display: "flex",
68        flexWrap: "wrap",
69        fontSize: title.length > 60 ? 52 : 64,
70        fontWeight: 700,
71        justifyContent: "center",
72        letterSpacing: "-0.03em",
73        lineHeight: 1.15,
74        maxWidth: "900px",
75        textAlign: "center",
76        textWrap: "balance",
77      }}
78    >
79      {title.split(" ").map((word, i) => (
80        <span
81          key={i}
82          style={{
83            color: i % 2 === 0 ? "#71717a" : "#fafafa",
84            marginRight: "0.3em",
85          }}
86        >
87          {word}
88        </span>
89      ))}
90    </div>
91 
92    {/* URL */}
93    {url ? (
94      <div
95        style={{
96          color: "#52525b",
97          fontSize: "24px",
98          fontWeight: 500,
99          letterSpacing: "0.02em",
100          marginTop: "48px",
101        }}
102      >
103        {url}
104      </div>
105    ) : null}
106  </div>
107);