|
1
|
import React, { Component } from 'react'; |
|
2
|
import { FormattedMessage } from 'react-intl'; |
|
3
|
import LanguageDropdown from './LanguageDropdown'; |
|
4
|
|
|
5
|
type HeaderProps = { |
|
6
|
onChangeLanguage: (language: string) => void |
|
7
|
} |
|
8
|
|
|
9
|
type HeaderState = { |
|
10
|
expand: boolean |
|
11
|
} |
|
12
|
|
|
13
|
class Header extends Component<HeaderProps, HeaderState> { |
|
14
|
|
|
15
|
constructor(props: HeaderProps | Readonly<HeaderProps>) { |
|
16
|
super(props); |
|
17
|
this.state = { expand: false }; |
|
18
|
} |
|
19
|
|
|
20
|
toggleExpand() { |
|
21
|
this.setState({ expand: !this.state.expand }) |
|
22
|
} |
|
23
|
|
|
24
|
render() { |
|
25
|
return ( |
|
26
|
<header> |
|
27
|
<div className={`collapse bg-dark ${this.state.expand ? 'show' : ''}`} id="navbarHeader"> |
|
28
|
<div className="container"> |
|
29
|
<div className="row"> |
|
30
|
<div className="col-sm-6 col-md-6 py-4"> |
|
31
|
<h4 className="text-white"> |
|
32
|
<FormattedMessage id="about.title" |
|
33
|
defaultMessage="About" |
|
34
|
description="About page title" /></h4> |
|
35
|
<p className="text-muted">We buy things we don't need, with money we don't have, to impress people we don't like.</p> |
|
36
|
<p className="text-muted"><a href="https://hetzner.cloud/?ref=WwAE3O6U53DF" target={`__blank`} >Get your proper VM</a>.</p> |
|
37
|
</div> |
|
38
|
<div className="col-sm-2 offset-md-1 py-4"> |
|
39
|
<h4 className="text-white"> |
|
40
|
<FormattedMessage id="header.fun" |
|
41
|
defaultMessage="Fun projects" |
|
42
|
description="Fun projects title"/></h4> |
|
43
|
<ul className="list-unstyled"> |
|
44
|
<li><a className="text-white" href="https://musik88.com/" title="Musik88" target="_blank" rel="noopener noreferrer">Musik88</a></li> |
|
45
|
<li><a className="text-white" href="https://splitfire.ai/" title="SplitFire AI" target="_blank" rel="noopener noreferrer">SplitFire AI</a></li> |
|
46
|
<li><a className="text-white" href="https://smbpndk.com/" title="SumbuPendek" target="_blank" rel="noopener noreferrer">SumbuPendek</a></li> |
|
47
|
<li><a className="text-white" href="https://scandinasia.eu/" title="SumbuPendek" target="_blank" rel="noopener noreferrer">United States of Scandinasia</a></li> |
|
48
|
</ul> |
|
49
|
</div> |
|
50
|
<div className="col-sm-2 py-4"> |
|
51
|
<h4 className="text-white"> |
|
52
|
<FormattedMessage id="contact.title" |
|
53
|
defaultMessage="Contact" |
|
54
|
description="Contact page title"/></h4> |
|
55
|
<ul className="list-unstyled"> |
|
56
|
<li><a className="text-white" href="https://stackoverflow.com/users/1137814/seto" title="StackOverflow" target="_blank" rel="noopener noreferrer">StackOverflow</a></li> |
|
57
|
<li><a className="text-white" href="https://github.com/setoelkahfi" title="GitHub" target="_blank" rel="noopener noreferrer">GitHub</a></li> |
|
58
|
<li><a className="text-white" href="https://medium.com/@setoelkahfi" title="Medium" target="_blank" rel="noopener noreferrer">Medium</a></li> |
|
59
|
<li><a className="text-white" href="https://id.linkedin.com/in/setoelkahfi" title="LinkedIn" target="_blank" rel="noopener noreferrer">LinkedIn</a></li> |
|
60
|
</ul> |
|
61
|
</div> |
|
62
|
</div> |
|
63
|
</div> |
|
64
|
</div> |
|
65
|
<div className="navbar navbar-dark bg-dark shadow-sm"> |
|
66
|
<div className="container"> |
|
67
|
<a href={`https://musik88.com/@seto`} target={`__blank`} className="navbar-brand d-flex align-items-center"> |
|
68
|
<strong>@seto</strong> |
|
69
|
</a> |
|
70
|
<LanguageDropdown onChangeLanguage={this.props.onChangeLanguage} /> |
|
71
|
<button className="navbar-toggler" onClick={this.toggleExpand.bind(this)} type="button" data-bs-toggle="collapse" data-bs-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded={this.state.expand} aria-label="Toggle navigation"> |
|
72
|
<span className="navbar-toggler-icon"></span> |
|
73
|
</button> |
|
74
|
</div> |
|
75
|
</div> |
|
76
|
</header> |
|
77
|
) |
|
78
|
} |
|
79
|
} |
|
80
|
|
|
81
|
export default Header; |