A tool for people curious about the React Server Components protocol

add help link

Changed files
+42
src
client
+32
src/client/ui/App.css
··· 21 21 white-space: nowrap; 22 22 } 23 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 + 24 52 .App-headerSpacer { 25 53 flex: 1; 26 54 } ··· 303 331 304 332 .App-title { 305 333 display: none; 334 + } 335 + 336 + .App-helpLink { 337 + margin-left: 0; 306 338 } 307 339 308 340 .App-exampleSelect {
+10
src/client/ui/App.tsx
··· 277 277 <> 278 278 <header className="App-header"> 279 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> 280 290 <div className="App-exampleSelect"> 281 291 <label className="App-exampleSelect-label">Example</label> 282 292 <div className="App-exampleSelect-selectWrapper">