chadtmiller.com
Search interface for Tangled running on a Slice
1import githubColors from "github-colors";
2
3interface Language {
4 name: string;
5 percentage: number;
6 size: number;
7}
8
9interface RepoCardProps {
10 repoName: string;
11 ownerHandle: string;
12 description?: string;
13 starCount: number;
14 createdAt: string;
15 avatarSrc?: string;
16 languages?: Language[];
17}
18
19const RepoCard = ({
20 repoName,
21 ownerHandle,
22 description,
23 starCount,
24 createdAt,
25 avatarSrc,
26 languages,
27}: RepoCardProps) => (
28 <div
29 style={{
30 width: "100%",
31 height: "100%",
32 backgroundImage:
33 "linear-gradient(135deg, rgba(22, 78, 99, 0.2) 0%, rgba(88, 28, 135, 0.2) 50%, rgba(131, 24, 67, 0.2) 100%)",
34 backgroundColor: "#000000",
35 display: "flex",
36 flexDirection: "column",
37 padding: "40px",
38 fontFamily: "JetBrains Mono, Noto Color Emoji",
39 color: "#ffffff",
40 }}
41 >
42 {/* Header */}
43 <div
44 style={{
45 color: "#06b6d4", // text-cyan-400
46 fontSize: "14px",
47 textTransform: "uppercase",
48 letterSpacing: "2px",
49 marginBottom: "24px",
50 }}
51 >
52 TANGLED_REPO_SEARCH // REPO_SHARE
53 </div>
54
55 {/* Main content */}
56 <div
57 style={{
58 display: "flex",
59 flexDirection: "row",
60 alignItems: "center",
61 marginBottom: "32px",
62 }}
63 >
64 {/* Avatar/Initial */}
65 {avatarSrc ? (
66 <img
67 src={avatarSrc}
68 style={{
69 width: "60px",
70 height: "60px",
71 borderRadius: "4px",
72 marginRight: "20px",
73 border: "2px solid #06b6d4",
74 objectFit: "cover",
75 }}
76 />
77 ) : (
78 <div
79 style={{
80 width: "60px",
81 height: "60px",
82 backgroundColor: "#06b6d4", // bg-cyan-400
83 display: "flex",
84 alignItems: "center",
85 justifyContent: "center",
86 marginRight: "20px",
87 fontSize: "24px",
88 fontWeight: "bold",
89 color: "#000000",
90 borderRadius: "4px",
91 }}
92 >
93 {repoName.charAt(0).toUpperCase()}
94 </div>
95 )}
96
97 {/* Repo info */}
98 <div
99 style={{
100 display: "flex",
101 flexDirection: "column",
102 }}
103 >
104 <div
105 style={{
106 fontSize: "32px",
107 fontWeight: "bold",
108 color: "#4ade80", // text-green-400
109 marginBottom: "4px",
110 }}
111 >
112 {repoName}
113 </div>
114 <div
115 style={{
116 fontSize: "16px",
117 color: "#f472b6", // text-pink-400
118 }}
119 >
120 OWNER: @{ownerHandle || "unknown"}
121 </div>
122 </div>
123 </div>
124
125 {/* Description */}
126 <div
127 style={{
128 fontSize: "16px",
129 color: "#a3e635", // text-lime-400
130 marginBottom: "24px",
131 lineHeight: 1.5,
132 }}
133 >
134 {description || "NO_DESCRIPTION_AVAILABLE"}
135 </div>
136
137 {/* Language breakdown */}
138 {languages && languages.length > 0 && (
139 <div style={{ marginBottom: "24px", display: "flex", flexDirection: "column" }}>
140 <div
141 style={{
142 fontSize: "12px",
143 color: "#06b6d4",
144 textTransform: "uppercase",
145 letterSpacing: "1px",
146 marginBottom: "8px",
147 display: "flex",
148 }}
149 >
150 LANGUAGE_BREAKDOWN
151 </div>
152
153 {/* Language bar */}
154 <div
155 style={{
156 display: "flex",
157 height: "8px",
158 backgroundColor: "#111111",
159 borderRadius: "4px",
160 overflow: "hidden",
161 marginBottom: "12px",
162 }}
163 >
164 {languages.map((lang) => (
165 <div
166 style={{
167 width: `${lang.percentage}%`,
168 backgroundColor: githubColors.get(lang.name || "Other")?.color || "#888888",
169 height: "100%",
170 }}
171 />
172 ))}
173 </div>
174
175 {/* Language legend */}
176 <div
177 style={{
178 display: "flex",
179 flexWrap: "wrap",
180 gap: "12px",
181 }}
182 >
183 {languages.map((lang) => (
184 <div
185 style={{
186 display: "flex",
187 alignItems: "center",
188 gap: "6px",
189 fontSize: "12px",
190 }}
191 >
192 <div
193 style={{
194 width: "10px",
195 height: "10px",
196 borderRadius: "2px",
197 backgroundColor: githubColors.get(lang.name || "Other")?.color || "#888888",
198 }}
199 />
200 <span style={{ color: "#94a3b8", display: "flex", gap: "8px" }}>
201 <span>{lang.name || "Other"}</span>
202 <span>{lang.percentage.toFixed(1)}%</span>
203 </span>
204 </div>
205 ))}
206 </div>
207 </div>
208 )}
209
210 {/* Footer with star count and date */}
211 <div
212 style={{
213 display: "flex",
214 flexDirection: "row",
215 alignItems: "center",
216 justifyContent: "space-between",
217 marginTop: "auto",
218 }}
219 >
220 {/* Star count */}
221 {starCount > 0 && (
222 <div
223 style={{
224 display: "flex",
225 flexDirection: "row",
226 alignItems: "center",
227 backgroundColor: "rgba(234, 179, 8, 0.2)", // bg-yellow-500/20
228 border: "1px solid #facc15", // border-yellow-400
229 padding: "8px 16px",
230 fontSize: "16px",
231 color: "#facc15", // text-yellow-400
232 }}
233 >
234 <span>⭐ {starCount}</span>
235 </div>
236 )}
237
238 {/* Date */}
239 <div
240 style={{
241 fontSize: "12px",
242 color: "#06b6d4", // text-cyan-400
243 textTransform: "uppercase",
244 letterSpacing: "1px",
245 }}
246 >
247 {new Date(createdAt).toLocaleDateString()}
248 </div>
249 </div>
250 </div>
251);
252
253export default RepoCard;