danabra.mov
A tool for people curious about the React Server Components protocol
rscexplorer.dev/
rsc
react
add help link
+32
src/client/ui/App.css
+32
src/client/ui/App.css
···
21
white-space: nowrap;
22
}
23
24
+
.App-helpLink {
25
+
display: flex;
26
+
align-items: center;
27
+
justify-content: center;
28
+
width: 18px;
29
+
height: 18px;
30
+
border-radius: 50%;
31
+
background: var(--border);
32
+
color: var(--text-dim);
33
+
font-size: 11px;
34
+
font-weight: 600;
35
+
text-decoration: none;
36
+
transition:
37
+
background 0.15s,
38
+
color 0.15s;
39
+
margin-left: -8px;
40
+
}
41
+
42
+
.App-helpLink:hover {
43
+
background: #444;
44
+
color: var(--text-bright);
45
+
}
46
+
47
+
.App-helpLink:focus-visible {
48
+
outline: 2px solid #ffd54f;
49
+
outline-offset: 2px;
50
+
}
51
+
52
.App-headerSpacer {
53
flex: 1;
54
}
···
331
332
.App-title {
333
display: none;
334
+
}
335
+
336
+
.App-helpLink {
337
+
margin-left: 0;
338
}
339
340
.App-exampleSelect {
+10
src/client/ui/App.tsx
+10
src/client/ui/App.tsx
···
277
<>
278
<header className="App-header">
279
<h1 className="App-title">RSC Explorer</h1>
280
+
<a
281
+
href="https://overreacted.io/introducing-rsc-explorer/"
282
+
target="_blank"
283
+
rel="noopener noreferrer"
284
+
className="App-helpLink"
285
+
title="What is this?"
286
+
aria-label="What is this?"
287
+
>
288
+
?
289
+
</a>
290
<div className="App-exampleSelect">
291
<label className="App-exampleSelect-label">Example</label>
292
<div className="App-exampleSelect-selectWrapper">