Shadcn Registry 5

1export interface ShadcnRegistry5Props {
2  name: string;
3  title: string;
4  description?: string;
5  logo?: string;
6}
7 
8export const ShadcnRegistry5 = ({
9  name,
10  title,
11  description = "",
12  logo = "",
13}: ShadcnRegistry5Props) => (
14  <div
15    style={{
16      backgroundColor: "#fafafa",
17      color: "#0a0a0a",
18      display: "flex",
19      height: "100%",
20      position: "relative",
21      width: "100%",
22    }}
23  >
24    {/* Grid lines — matching grid/index.tsx */}
25    <div
26      style={{
27        borderLeft: "1px dashed #44403c",
28        bottom: 0,
29        left: "64px",
30        position: "absolute",
31        top: 0,
32        width: "1px",
33      }}
34    />
35    <div
36      style={{
37        borderLeft: "1px dashed #44403c",
38        bottom: 0,
39        position: "absolute",
40        right: "64px",
41        top: 0,
42        width: "1px",
43      }}
44    />
45    <div
46      style={{
47        borderTop: "1px dashed #44403c",
48        height: "1px",
49        left: 0,
50        position: "absolute",
51        right: 0,
52        top: "64px",
53      }}
54    />
55    <div
56      style={{
57        borderTop: "1px dashed #44403c",
58        bottom: "64px",
59        height: "1px",
60        left: 0,
61        position: "absolute",
62        right: 0,
63      }}
64    />
65 
66    {/* Main content — absolutely positioned in center */}
67    <div
68      style={{
69        alignItems: "center",
70        bottom: "128px",
71        display: "flex",
72        flexDirection: "column",
73        justifyContent: "center",
74        left: "128px",
75        position: "absolute",
76        right: "128px",
77        textAlign: "center",
78        top: "128px",
79        width: "896px",
80      }}
81    >
82      {/* Logo + Name */}
83      <div
84        style={{
85          alignItems: "center",
86          display: "flex",
87          gap: "12px",
88          marginBottom: "32px",
89        }}
90      >
91        {logo ? (
92          <img
93            height={40}
94            src={logo}
95            width={40}
96            style={{ objectFit: "contain" }}
97          />
98        ) : (
99          <div
100            style={{
101              backgroundColor: "rgba(0,0,0,0.3)",
102              borderRadius: "12px",
103              height: "40px",
104              width: "40px",
105            }}
106          />
107        )}
108        <div style={{ color: "#18181b", fontSize: "28px", fontWeight: 600 }}>
109          {name}
110        </div>
111      </div>
112 
113      {/* Title */}
114      <div
115        style={{
116          display: "flex",
117          fontSize: title.length > 30 ? 72 : 88,
118          fontWeight: 800,
119// … truncated