prototypey.org - atproto lexicon typescript toolkit - mirror https://github.com/tylersayshi/prototypey
story link to blog post
+89
-64
+89
-64
packages/site/src/components/Header.tsx
+89
-64
packages/site/src/components/Header.tsx
···
1
1
import { useState } from "react";
2
2
3
+
interface HeaderLinkProps {
4
+
href: string;
5
+
icon: React.ReactNode;
6
+
label: string;
7
+
}
8
+
9
+
function HeaderLink({ href, icon, label }: HeaderLinkProps) {
10
+
return (
11
+
<a
12
+
href={href}
13
+
target="_blank"
14
+
rel="noopener noreferrer"
15
+
style={{
16
+
color: "var(--color-text-heading)",
17
+
textDecoration: "none",
18
+
fontSize: "1rem",
19
+
fontWeight: "600",
20
+
display: "flex",
21
+
alignItems: "center",
22
+
gap: "0.5rem",
23
+
transition: "opacity 0.2s",
24
+
willChange: "opacity",
25
+
}}
26
+
onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.6")}
27
+
onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
28
+
>
29
+
{icon}
30
+
{label}
31
+
</a>
32
+
);
33
+
}
34
+
3
35
export function Header() {
4
36
const [copied, setCopied] = useState(false);
5
37
···
57
89
}}
58
90
>
59
91
<div className="header-links">
60
-
<a
92
+
<HeaderLink
61
93
href="https://github.com/tylersayshi/prototypey?tab=readme-ov-file#prototypey"
62
-
target="_blank"
63
-
rel="noopener noreferrer"
64
-
style={{
65
-
color: "var(--color-text-heading)",
66
-
textDecoration: "none",
67
-
fontSize: "1rem",
68
-
fontWeight: "600",
69
-
display: "flex",
70
-
alignItems: "center",
71
-
gap: "0.5rem",
72
-
transition: "opacity 0.2s",
73
-
willChange: "opacity",
74
-
}}
75
-
onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.6")}
76
-
onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
77
-
>
78
-
<svg
79
-
width="20"
80
-
height="20"
81
-
viewBox="0 0 24 24"
82
-
fill="currentColor"
83
-
aria-hidden="true"
84
-
style={{ flexShrink: 0 }}
85
-
>
86
-
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
87
-
</svg>
88
-
docs
89
-
</a>
90
-
<a
94
+
icon={
95
+
<svg
96
+
width="20"
97
+
height="20"
98
+
viewBox="0 0 24 24"
99
+
fill="currentColor"
100
+
aria-hidden="true"
101
+
style={{ flexShrink: 0 }}
102
+
>
103
+
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
104
+
</svg>
105
+
}
106
+
label="docs"
107
+
/>
108
+
<HeaderLink
91
109
href="https://www.npmjs.com/package/prototypey"
92
-
target="_blank"
93
-
rel="noopener noreferrer"
94
-
style={{
95
-
color: "var(--color-text-heading)",
96
-
textDecoration: "none",
97
-
fontSize: "1rem",
98
-
fontWeight: "600",
99
-
display: "flex",
100
-
alignItems: "center",
101
-
gap: "0.5rem",
102
-
transition: "opacity 0.2s",
103
-
willChange: "opacity",
104
-
}}
105
-
onMouseEnter={(e) => (e.currentTarget.style.opacity = "0.6")}
106
-
onMouseLeave={(e) => (e.currentTarget.style.opacity = "1")}
107
-
>
108
-
<svg
109
-
width="20"
110
-
height="20"
111
-
viewBox="0 0 24 24"
112
-
fill="none"
113
-
stroke="currentColor"
114
-
strokeWidth="2"
115
-
strokeLinecap="round"
116
-
strokeLinejoin="round"
117
-
aria-hidden="true"
118
-
style={{ flexShrink: 0 }}
119
-
>
120
-
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
121
-
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
122
-
<line x1="12" y1="22.08" x2="12" y2="12" />
123
-
</svg>
124
-
npm
125
-
</a>
110
+
icon={
111
+
<svg
112
+
width="20"
113
+
height="20"
114
+
viewBox="0 0 24 24"
115
+
fill="none"
116
+
stroke="currentColor"
117
+
strokeWidth="2"
118
+
strokeLinecap="round"
119
+
strokeLinejoin="round"
120
+
aria-hidden="true"
121
+
style={{ flexShrink: 0 }}
122
+
>
123
+
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
124
+
<polyline points="3.27 6.96 12 12.01 20.73 6.96" />
125
+
<line x1="12" y1="22.08" x2="12" y2="12" />
126
+
</svg>
127
+
}
128
+
label="npm"
129
+
/>
130
+
<HeaderLink
131
+
href="https://notes.tylur.dev/3m5a3do4eus2w"
132
+
icon={
133
+
<svg
134
+
width="20"
135
+
height="20"
136
+
viewBox="0 0 24 24"
137
+
fill="none"
138
+
stroke="currentColor"
139
+
strokeWidth="2"
140
+
strokeLinecap="round"
141
+
strokeLinejoin="round"
142
+
aria-hidden="true"
143
+
style={{ flexShrink: 0 }}
144
+
>
145
+
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
146
+
<path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
147
+
</svg>
148
+
}
149
+
label="story"
150
+
/>
126
151
</div>
127
152
<button
128
153
onClick={handleShare}