@@ -26,6 +26,21 @@ const headerLinks = [
2626 links . common_mistakes ,
2727] ;
2828
29+ const TwitterBird = ( ) => (
30+ < svg
31+ className = "w-4 h-4 group-hover:scale-110 duration-150 transform"
32+ xmlns = "http://www.w3.org/2000/svg"
33+ viewBox = "0 0 72 72"
34+ >
35+ < path fill = "none" d = "M0 0h72v72H0z" />
36+ < path
37+ className = "icon"
38+ fill = "#fff"
39+ d = "M68.812 15.14c-2.348 1.04-4.87 1.744-7.52 2.06 2.704-1.62 4.78-4.186 5.757-7.243-2.53 1.5-5.33 2.592-8.314 3.176C56.35 10.59 52.948 9 49.182 9c-7.23 0-13.092 5.86-13.092 13.093 0 1.026.118 2.02.338 2.98C25.543 24.527 15.9 19.318 9.44 11.396c-1.125 1.936-1.77 4.184-1.77 6.58 0 4.543 2.312 8.552 5.824 10.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163 0 6.345 4.513 11.638 10.504 12.84-1.1.298-2.256.457-3.45.457-.845 0-1.666-.078-2.464-.23 1.667 5.2 6.5 8.985 12.23 9.09-4.482 3.51-10.13 5.605-16.26 5.605-1.055 0-2.096-.06-3.122-.184 5.794 3.717 12.676 5.882 20.067 5.882 24.083 0 37.25-19.95 37.25-37.25 0-.565-.013-1.133-.038-1.693 2.558-1.847 4.778-4.15 6.532-6.774z"
40+ />
41+ </ svg >
42+ ) ;
43+ 2944function Header ( {
3045 gistId,
3146 gistVersion,
@@ -38,8 +53,11 @@ function Header({
3853} ) {
3954 return (
4055 < nav className = "text-white w-full h-16" >
41- < div className = "flex items-center justify-between bg-gray-900 px-8 h-16" >
42- < div className = "flex items-center flex-shrink-0 text-white h-full space-x-8" >
56+ < div
57+ className = "grid grid-cols-2 items-center bg-gray-900 px-8 h-16"
58+ style = { { gridTemplateColumns : '1fr 1fr' } }
59+ >
60+ < div className = "flex items-center justify-between flex-shrink-0 text-white h-full space-x-8 pr-4" >
4361 < a className = "title" href = "/" >
4462 < h1 className = "font-light text-xl tracking-tight flex space-x-4 items-center justify-start" >
4563 < img
@@ -48,20 +66,33 @@ function Header({
4866 src = { icon }
4967 alt = "Testing Playground mascot Froggy"
5068 />
51- ️ < span className = "hidden sm :block" > Testing Playground</ span >
69+ ️ < span className = "hidden md :block" > Testing Playground</ span >
5270 </ h1 >
5371 </ a >
72+ 73+ < div className = "flex items-center gap-2" >
74+ < a
75+ className = "rounded-md text-white group text-sm px-2 py-1 flex items-center space-x-2 no-underline"
76+ style = { { backgroundColor : '#1d9bf0' } }
77+ target = "_blank"
78+ rel = "noopener noreferrer"
79+ href = "https://meijer.ws/twitter"
80+ >
81+ < TwitterBird />
82+ < span > @meijer_s</ span >
83+ </ a >
84+ </ div >
5485 </ div >
5586
56- < div className = "flex items-center text-sm h-full relative" >
87+ < div className = "flex items-center justify-end text-sm h-full relative" >
5788 < Menu >
5889 < MenuButton >
5990 { status === 'saving' ? (
6091 < SyncIcon size = { 12 } className = "spinner" />
6192 ) : (
6293 < FileCodeIcon size = { 12 } />
6394 ) }
64- < span > playground </ span >
95+ ️ < span className = "hidden sm:block" > Playground </ span >
6596 </ MenuButton >
6697
6798 < MenuList >
@@ -141,14 +172,13 @@ function Header({
141172 ) : (
142173 < PaperAirplaneIcon size = { 12 } />
143174 ) }
144- 145- < span > run</ span >
175+ ️ < span className = "hidden sm:block" > Run</ span >
146176 </ button >
147177
148178 < Menu >
149179 < MenuButton >
150- < SettingsIcon size = { 12 } />
151- < span > settings </ span >
180+ < SettingsIcon size = { 12 } /> ️ { ' ' }
181+ < span className = "hidden sm:block" > Settings </ span >
152182 </ MenuButton >
153183 < MenuPopover >
154184 < Settings dispatch = { dispatch } settings = { settings } />
@@ -176,7 +206,7 @@ function Header({
176206 href = "https://github.com/sponsors/smeijer"
177207 target = "_blank"
178208 >
179- Support us
209+ Support Us
180210 </ MenuLink >
181211 < MenuLink href = "https://twitter.com/meijer_s" target = "_blank" >
182212 Twitter
0 commit comments