working version harcoded ones
Seto Elkahfi committed
Nov 1, 2020 at 15:56 UTC
2d7c035e29ae4b300a990154878a8dc798ad1917
5 files changed
+122
-29
public/en-flag-icon-16.png
Binary files /dev/null and b/public/en-flag-icon-16.png differ
public/id-flag-icon-16.png
Binary files /dev/null and b/public/id-flag-icon-16.png differ
public/sv-flag-icon-16.png
Binary files /dev/null and b/public/sv-flag-icon-16.png differ
src/components/Header.tsx
+48
-29
@@ -1,6 +1,11 @@
1
-import React from 'react';
1
+import React, { Component, CSSProperties } from 'react';
2
import { Link } from 'react-router-dom';
3
import { FormattedMessage } from 'react-intl';
4
+import LanguageLinks from './LanguageLinks';
5
+
6
+const styleHeader = {
7
+ height: 50
8
+}
9
10
const linkStyle = {
11
color: '#fff',
@@ -12,33 +17,47 @@ const listStyle = {
17
margin: 4
18
}
19
15
-const Header = () => (
16
- <header>
17
- <nav>
18
- <ul>
19
- <li style={listStyle}><Link to='/' style={linkStyle}>
20
- <FormattedMessage id="header.home"
21
- defaultMessage="Home"
22
- description="Home link"/>
23
- </Link></li>
24
- <li style={listStyle}><Link to='/about' style={linkStyle}>
25
- <FormattedMessage id="header.about"
26
- defaultMessage="About"
27
- description="About link"/>
28
- </Link></li>
29
- <li style={listStyle}><Link to='/cv' style={linkStyle}>
30
- <FormattedMessage id="header.cv"
31
- defaultMessage="CV"
32
- description="CV link"/>
33
- </Link></li>
34
- <li style={listStyle}><Link to='/contact' style={linkStyle}>
35
- <FormattedMessage id="header.contact"
36
- defaultMessage="Contact"
37
- description="Contact link"/>
38
- </Link></li>
39
- </ul>
40
- </nav>
41
- </header>
42
-);
20
+const listStyleLanguage: CSSProperties = {
21
+ display: 'inline',
22
+ margin: 4,
23
+ float: 'right'
24
+}
25
+
26
+class Header extends Component {
27
+
28
+ render() {
29
+ return(
30
+ <header style={styleHeader}>
31
+ <nav>
32
+ <ul>
33
+ <li style={listStyle}><Link to='/' style={linkStyle}>
34
+ <FormattedMessage id="header.home"
35
+ defaultMessage="Home"
36
+ description="Home link"/>
37
+ </Link></li>
38
+ <li style={listStyle}><Link to='/about' style={linkStyle}>
39
+ <FormattedMessage id="header.about"
40
+ defaultMessage="About"
41
+ description="About link"/>
42
+ </Link></li>
43
+ <li style={listStyle}><Link to='/cv' style={linkStyle}>
44
+ <FormattedMessage id="header.cv"
45
+ defaultMessage="CV"
46
+ description="CV link"/>
47
+ </Link></li>
48
+ <li style={listStyle}><Link to='/contact' style={linkStyle}>
49
+ <FormattedMessage id="header.contact"
50
+ defaultMessage="Contact"
51
+ description="Contact link"/>
52
+ </Link></li>
53
+ <li style={listStyleLanguage}>
54
+ <LanguageLinks />
55
+ </li>
56
+ </ul>
57
+ </nav>
58
+ </header>
59
+ )
60
+ }
61
+}
62
63
export default Header;
src/components/LanguageLinks.tsx
new
+74
@@ -0,0 +1,74 @@
1
+import React, { Component } from "react";
2
+
3
+const imgFlag = {
4
+ width: 16,
5
+ height: 11
6
+}
7
+
8
+type LinkProps = {
9
+ link: string
10
+ icon: string
11
+ altTag: string
12
+}
13
+
14
+class LanguageLink extends Component<LinkProps> {
15
+
16
+ render() {
17
+ return(
18
+ <li>
19
+ <a href={this.props.link}>
20
+ <img src={this.props.icon} alt={this.props.altTag} style={imgFlag}/>
21
+ </a>
22
+ </li>
23
+ )
24
+ }
25
+}
26
+
27
+class LanguageLinks extends Component {
28
+
29
+ getLanguageList(): LinkProps[] {
30
+ var languageList: LinkProps[] = []
31
+
32
+ const en = {
33
+ link: "https://setoelkahfi.com",
34
+ icon: "en-flag-icon-16.png",
35
+ altTag: "UK Flag"
36
+ }
37
+
38
+ const sv = {
39
+ link: "https://setoelkahfi.se",
40
+ icon: "sv-flag-icon-16.png",
41
+ altTag: "Sweden Flag"
42
+ }
43
+
44
+ const id = {
45
+ link: "https://setoelkahfi.id",
46
+ icon: "id-flag-icon-16.png",
47
+ altTag: "Indonesian Flag"
48
+ }
49
+
50
+ languageList.push(en)
51
+ languageList.push(sv)
52
+ languageList.push(id)
53
+
54
+ return languageList
55
+ }
56
+
57
+ render() {
58
+
59
+ var languageList = [];
60
+ for (let language of this.getLanguageList()) {
61
+ languageList.push(<LanguageLink icon={language.icon} link={language.link} altTag={language.altTag} />);
62
+ }
63
+
64
+ return(
65
+ <div>
66
+ <ul>
67
+ {languageList}
68
+ </ul>
69
+ </div>
70
+ )
71
+ }
72
+}
73
+
74
+export default LanguageLinks
\ No newline at end of file