an app to share curated trails
sidetrail.app
1"use client";
2
3export default function GlobalError({
4 error: _error,
5 reset: _reset,
6}: {
7 error: Error & { digest?: string };
8 reset: () => void;
9}) {
10 return (
11 <html lang="en">
12 <head>
13 <style>{`
14 :root {
15 --text-primary: #000;
16 --text-muted: #999;
17 --text-tertiary: #888;
18 --bg-primary: #fefefe;
19 }
20 @media (prefers-color-scheme: dark) {
21 :root {
22 --text-primary: rgba(255, 255, 255, 0.92);
23 --text-muted: rgba(255, 255, 255, 0.45);
24 --text-tertiary: rgba(255, 255, 255, 0.55);
25 --bg-primary: #1b1a19;
26 }
27 }
28 * { box-sizing: border-box; margin: 0; padding: 0; }
29 html, body {
30 height: 100%;
31 }
32 body {
33 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
34 -webkit-font-smoothing: antialiased;
35 background-color: var(--bg-primary);
36 color: var(--text-primary);
37 display: flex;
38 align-items: center;
39 justify-content: center;
40 }
41 .container {
42 text-align: center;
43 padding: 2rem;
44 }
45 h1 {
46 font-family: "SF Mono", Monaco, Inconsolata, "Fira Code", monospace;
47 font-size: 1.25rem;
48 font-weight: 500;
49 margin-bottom: 0.5rem;
50 text-transform: lowercase;
51 letter-spacing: -0.02em;
52 }
53 p {
54 font-size: 0.875rem;
55 color: var(--text-muted);
56 margin-bottom: 1.5rem;
57 text-transform: lowercase;
58 }
59 button {
60 font-family: inherit;
61 font-size: 0.8125rem;
62 font-weight: 500;
63 padding: 0.5rem 1rem;
64 background: transparent;
65 color: var(--text-primary);
66 border: 1.5px solid var(--text-tertiary);
67 border-radius: 6px;
68 cursor: pointer;
69 text-transform: lowercase;
70 transition: border-color 0.2s ease;
71 }
72 button:hover {
73 border-color: var(--text-primary);
74 }
75 `}</style>
76 </head>
77 <body>
78 <div className="container">
79 <h1>lost the trail</h1>
80 <p>no worries. reload to get back on track</p>
81 <button onClick={() => window.location.reload()}>reload</button>
82 </div>
83 </body>
84 </html>
85 );
86}