@@ -3,32 +3,60 @@ import cx from 'classnames';
3
3
4
4
import config from '../../config.json' ;
5
5
import I18N from '../../i18n' ;
6
+ import { useTheme } from '../../context/theme' ;
6
7
import { Container } from '../../ui/container' ;
7
8
import { Icon } from '../../ui/icon' ;
8
9
import { FlexStack } from '../../layout/flex-stack' ;
9
10
import { JobsHeader } from '../../components/jobs-header' ;
10
11
import css from './header.module.css' ;
12
+ import { Button } from '../../ui/button' ;
11
13
12
14
interface HeaderProps {
13
15
jobs : React . ComponentProps < typeof JobsHeader > [ 'jobs' ] ;
14
16
}
15
17
16
- export const Header = ( { className = '' , jobs } : HeaderProps & React . ComponentProps < 'header' > ) => (
17
- < Container as = "header" className = { cx ( css . root , className ) } >
18
- < FlexStack space = "small" alignItems = "center" >
19
- < JobsHeader className = { css . jobs } jobs = { jobs } />
20
- < div className = { css . tools } >
21
- < a
22
- href = { config . gitHubUrl }
23
- target = "_blank"
24
- rel = "noopener noreferrer"
25
- title = { I18N . GITHUB_LINK_TITLE }
26
- aria-label = { I18N . GITHUB_LINK_TITLE }
27
- className = { css . toolsGitHub }
28
- >
29
- < Icon glyph = { Icon . ICONS . GITHUB } size = "large" className = { css . toolsGitHubIcon } />
30
- </ a >
31
- </ div >
32
- </ FlexStack >
33
- </ Container >
34
- ) ;
18
+ export const Header = ( { className = '' , jobs } : HeaderProps & React . ComponentProps < 'header' > ) => {
19
+ const theme = useTheme ( ) ;
20
+
21
+ return (
22
+ < Container as = "header" className = { cx ( css . root , className ) } >
23
+ < FlexStack space = "small" alignItems = "center" >
24
+ < JobsHeader className = { css . jobs } jobs = { jobs } />
25
+ < FlexStack space = "xxxsmall" alignItems = "center" className = { css . tools } >
26
+ { theme . name === 'dark' ? (
27
+ < Button
28
+ size = "small"
29
+ outline
30
+ onClick = { ( ) => theme . update ( 'light' ) }
31
+ className = { css . toolsButton }
32
+ >
33
+ < Icon glyph = { Icon . ICONS . MOON } />
34
+ </ Button >
35
+ ) : (
36
+ < Button
37
+ size = "small"
38
+ outline
39
+ onClick = { ( ) => theme . update ( 'dark' ) }
40
+ className = { css . toolsButton }
41
+ >
42
+ < Icon glyph = { Icon . ICONS . SUN } />
43
+ </ Button >
44
+ ) }
45
+ < Button
46
+ size = "small"
47
+ outline
48
+ as = "a"
49
+ href = { config . gitHubUrl }
50
+ target = "_blank"
51
+ rel = "noopener noreferrer"
52
+ title = { I18N . GITHUB_LINK_TITLE }
53
+ aria-label = { I18N . GITHUB_LINK_TITLE }
54
+ className = { css . toolsButton }
55
+ >
56
+ < Icon glyph = { Icon . ICONS . GITHUB } />
57
+ </ Button >
58
+ </ FlexStack >
59
+ </ FlexStack >
60
+ </ Container >
61
+ ) ;
62
+ } ;
0 commit comments