Shadcn Registry 2

1export interface ShadcnRegistry2Props {
2  name: string;
3  category: string;
4  title: string;
5  items?: string[];
6  logo?: string;
7  accent?: string;
8}
9 
10export const ShadcnRegistry2 = ({
11  name,
12  category,
13  title,
14  items = [],
15  logo = "",
16  accent = "#4f46e5",
17}: ShadcnRegistry2Props) => (
18  <div
19    style={{
20      backgroundColor: "#ffffff",
21      color: "#0a0a0a",
22      display: "flex",
23      flexDirection: "column",
24      height: "100%",
25      justifyContent: "center",
26      padding: "80px",
27      position: "relative",
28      width: "100%",
29    }}
30  >
31    {/* Header: Logo + Name | Category */}
32    <div
33      style={{
34        alignItems: "center",
35        display: "flex",
36        gap: "20px",
37        marginBottom: "64px",
38      }}
39    >
40      {logo ? (
41        <img
42          alt=""
43          height={64}
44          src={logo}
45          width={64}
46          style={{
47            objectFit: "contain",
48          }}
49        />
50      ) : (
51        <div
52          style={{
53            alignItems: "center",
54            backgroundColor: accent,
55            borderRadius: "16px",
56            display: "flex",
57            height: "64px",
58            justifyContent: "center",
59            width: "64px",
60          }}
61        >
62          <svg
63            width="32"
64            height="32"
65            viewBox="0 0 24 24"
66            fill="none"
67            stroke="#ffffff"
68            strokeWidth="2"
69            strokeLinecap="round"
70            strokeLinejoin="round"
71          >
72            <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" />
73          </svg>
74        </div>
75      )}
76      <div
77        style={{
78          alignItems: "center",
79          display: "flex",
80          gap: "20px",
81        }}
82      >
83        <div
84          style={{
85            fontSize: "40px",
86            fontWeight: 700,
87            letterSpacing: "-0.02em",
88          }}
89        >
90          {name}
91        </div>
92        <div
93          style={{
94            color: "#d4d4d8",
95            fontSize: "36px",
96            fontWeight: 500,
97          }}
98        >
99          |
100        </div>
101        <div
102          style={{
103            color: "#a1a1aa",
104            fontSize: "36px",
105            fontWeight: 500,
106          }}
107        >
108          {category}
109        </div>
110      </div>
111    </div>
112 
113    {/* Title */}
114    <div
115      style={{
116        display: "flex",
117        fontSize: title.length > 50 ? 64 : 72,
118        fontWeight: 700,
119        letterSpacing: "-0.03em",
120        lineHeight: 1.1,
121        maxWidth: "900px",
122// … truncated