forked from alxshelepenok/gatsby-starter-lumen
/
index.jsx
65 lines (61 loc) · 1.79 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import React from 'react';
import PropTypes from 'prop-types';
import './style.scss';
import '../../assets/fonts/fontello-771c82e0/css/fontello.css';
class Links extends React.Component {
render() {
const author = this.props.data;
const links = {
telegram: author.telegram,
twitter: author.twitter,
github: author.github,
vk: author.vk,
rss: author.rss,
email: author.email
};
return (
<div className="links">
<ul className="links__list">
<li className="links__list-item">
<a href={ `https://www.twitter.com/${links.twitter}` } target="_blank" >
<i className="icon-twitter" />
</a>
</li>
<li className="links__list-item">
<a href={ `https://www.github.com/${links.github}` } target="_blank" >
<i className="icon-github" />
</a>
</li>
<li className="links__list-item">
<a href={ `https://www.vk.com/${links.vk}`} target="_blank" >
<i className="icon-vkontakte" />
</a>
</li>
</ul>
<ul className="links__list">
<li className="links__list-item">
<a href={`mailto:${links.email}`}>
<i className="icon-mail" />
</a>
</li>
<li className="links__list-item">
<a href={`telegram:${links.telegram}`}>
<i className="icon-paper-plane" />
</a>
</li>
</ul>
<ul className="links__list">
<li className="links__list-item">
<a href={links.rss}>
<i className="icon-rss" />
</a>
</li>
</ul>
</div>
);
}
}
Links.propTypes = {
data: PropTypes.object.isRequired
};
export default Links;