|
2 | 2 |
|
3 | 3 | import { useEffect, useState } from 'react' |
4 | 4 | import { useParams, useRouter } from 'next/navigation' |
5 | | -import Link from 'next/link' |
6 | 5 | import type { UserRepoSummary } from '@/lib/types' |
7 | 6 | import UserDashboard from '@/components/UserDashboard' |
8 | 7 | import LoadingState from '@/components/LoadingState' |
9 | | -import SiteFooter from '@/components/SiteFooter' |
10 | | -import PageHero from '@/components/PageHero' |
| 8 | +import SubpageShell from '@/components/SubpageShell' |
11 | 9 |
|
12 | 10 | const MONO = `var(--font-courier), system-ui, sans-serif` |
13 | 11 |
|
@@ -35,62 +33,30 @@ export default function UserPage() { |
35 | 33 | }, [username]) |
36 | 34 |
|
37 | 35 | return ( |
38 | | - <main className="page-shell-main"> |
39 | | - <div className="page-shell-inner"> |
40 | | - |
41 | | - <div style={{ paddingBottom: '4px', marginBottom: '2px' }}> |
42 | | - <Link |
43 | | - href="/" |
44 | | - aria-label="Back to home" |
45 | | - className="subpage-back-link alive-interactive" |
46 | | - style={{ |
47 | | - fontFamily: MONO, display: 'inline-flex', alignItems: 'center', gap: '5px', |
48 | | - color: '#9a9288', textDecoration: 'none', fontSize: '11px', fontWeight: 400, |
49 | | - letterSpacing: '0.06em', WebkitTapHighlightColor: 'transparent', transition: 'color 0.15s', |
50 | | - }} |
51 | | - onMouseEnter={e => { (e.currentTarget as HTMLAnchorElement).style.color = '#1a1a1a' }} |
52 | | - onMouseLeave={e => { (e.currentTarget as HTMLAnchorElement).style.color = '#9a9288' }} |
| 36 | + <SubpageShell |
| 37 | + title={`@${username}`} |
| 38 | + subtitle={ |
| 39 | + <span style={{ fontFamily: MONO, fontSize: '12px', color: 'var(--c-muted)', letterSpacing: '0.04em' }}> |
| 40 | + dev graveyard |
| 41 | + </span> |
| 42 | + } |
| 43 | + microcopy={null} |
| 44 | + > |
| 45 | + {loading && <LoadingState />} |
| 46 | + |
| 47 | + {error && ( |
| 48 | + <div style={{ textAlign: 'center', padding: '40px 0' }}> |
| 49 | + <p style={{ fontFamily: MONO, fontSize: '13px', color: '#8B0000', marginBottom: '20px' }}>{error}</p> |
| 50 | + <button |
| 51 | + onClick={() => router.push('/')} |
| 52 | + style={{ fontFamily: MONO, fontSize: '13px', fontWeight: 700, background: 'none', border: 'none', textDecoration: 'underline', textUnderlineOffset: '3px', color: '#160A06', cursor: 'pointer', minHeight: '44px', padding: '10px 0' }} |
53 | 53 | > |
54 | | - ← home |
55 | | - </Link> |
| 54 | + ← examine another subject |
| 55 | + </button> |
56 | 56 | </div> |
| 57 | + )} |
57 | 58 |
|
58 | | - <PageHero |
59 | | - title="Certificate of Death" |
60 | | - subtitle={ |
61 | | - <span style={{ |
62 | | - display: 'block', |
63 | | - fontFamily: MONO, |
64 | | - fontSize: 'clamp(15px, 4vw, 19px)', |
65 | | - fontWeight: 700, |
66 | | - color: '#2a2218', |
67 | | - letterSpacing: '0.02em', |
68 | | - marginTop: '2px', |
69 | | - }}> |
70 | | - @{username} |
71 | | - </span> |
72 | | - } |
73 | | - brandHref="/" |
74 | | - /> |
75 | | - |
76 | | - {loading && <LoadingState />} |
77 | | - |
78 | | - {error && ( |
79 | | - <div style={{ textAlign: 'center', padding: '40px 0' }}> |
80 | | - <p style={{ fontFamily: MONO, fontSize: '13px', color: '#8B0000', marginBottom: '20px' }}>{error}</p> |
81 | | - <button |
82 | | - onClick={() => router.push('/')} |
83 | | - style={{ fontFamily: MONO, fontSize: '13px', fontWeight: 700, background: 'none', border: 'none', textDecoration: 'underline', textUnderlineOffset: '3px', color: '#160A06', cursor: 'pointer', minHeight: '44px', padding: '10px 0' }} |
84 | | - > |
85 | | - ← examine another subject |
86 | | - </button> |
87 | | - </div> |
88 | | - )} |
89 | | - |
90 | | - {repos && !loading && <UserDashboard repos={repos} username={username} />} |
91 | | - |
92 | | - <SiteFooter /> |
93 | | - </div> |
94 | | - </main> |
| 59 | + {repos && !loading && <UserDashboard repos={repos} username={username} />} |
| 60 | + </SubpageShell> |
95 | 61 | ) |
96 | 62 | } |
0 commit comments