@setoelkahfi / personal-website
Code Commits Issues Pulls Sessions CI/CD
development
development feature/musik88-api feature/ssr-deployment main testing typescript
tsx 85 lines 4.93 KB
Raw
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 selectedLanguage: string
8 }
9
10 type HeaderState = {
11 expand: boolean
12 }
13
14 class Header extends Component<HeaderProps, HeaderState> {
15
16 constructor(props: HeaderProps | Readonly<HeaderProps>) {
17 super(props);
18 this.state = { expand: false };
19 }
20
21 toggleExpand() {
22 this.setState({ expand: !this.state.expand })
23 }
24
25 render() {
26 return (
27 <header>
28 <div className={`collapse bg-dark ${this.state.expand ? 'show' : ''}`} id="navbarHeader">
29 <div className="container">
30 <div className="row">
31 <div className="col-sm-6 col-md-6 py-4">
32 <h4 className="text-white">
33 <FormattedMessage id="about.title"
34 defaultMessage="About"
35 description="About page title" /></h4>
36 <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>
37 <p className="text-muted"><a href="https://hetzner.cloud/?ref=WwAE3O6U53DF" target={`__blank`} >Get your proper VM</a>.</p>
38 </div>
39 <div className="col-sm-2 offset-md-1 py-4">
40 <h4 className="text-white">
41 <FormattedMessage id="header.fun"
42 defaultMessage="Fun projects"
43 description="Fun projects title"/></h4>
44 <ul className="list-unstyled">
45 <li><a className="text-white" href="https://musik88.com/" title="Musik88" target="_blank" rel="noopener noreferrer">Musik88</a></li>
46 <li><a className="text-white" href="https://splitfire.ai/" title="SplitFire AI" target="_blank" rel="noopener noreferrer">SplitFire AI</a></li>
47 <li><a className="text-white" href="https://smbpndk.com/" title="SumbuPendek" target="_blank" rel="noopener noreferrer">SumbuPendek</a></li>
48 <li><a className="text-white" href="https://scandinasia.eu/" title="SumbuPendek" target="_blank" rel="noopener noreferrer">United States of Scandinasia</a></li>
49 </ul>
50 </div>
51 <div className="col-sm-2 py-4">
52 <h4 className="text-white">
53 <FormattedMessage id="contact.title"
54 defaultMessage="Contact"
55 description="Contact page title"/></h4>
56 <ul className="list-unstyled">
57 <li><a className="text-white" href="https://stackoverflow.com/users/1137814/seto" title="StackOverflow" target="_blank" rel="noopener noreferrer">StackOverflow</a></li>
58 <li><a className="text-white" href="https://github.com/setoelkahfi" title="GitHub" target="_blank" rel="noopener noreferrer">GitHub</a></li>
59 <li><a className="text-white" href="https://medium.com/@setoelkahfi" title="Medium" target="_blank" rel="noopener noreferrer">Medium</a></li>
60 <li><a className="text-white" href="https://id.linkedin.com/in/setoelkahfi" title="LinkedIn" target="_blank" rel="noopener noreferrer">LinkedIn</a></li>
61 </ul>
62 </div>
63 </div>
64 </div>
65 </div>
66 <div className="navbar navbar-dark bg-dark shadow-sm">
67 <div className="container">
68 <a href={`https://musik88.com/@seto`} target={`__blank`} className="navbar-brand d-flex align-items-center">
69 <strong>@seto</strong>
70 </a>
71 <LanguageDropdown
72 onChangeLanguage={this.props.onChangeLanguage}
73 selectedLanguage={this.props.selectedLanguage}
74 />
75 <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">
76 <span className="navbar-toggler-icon"></span>
77 </button>
78 </div>
79 </div>
80 </header>
81 )
82 }
83 }
84
85 export default Header;