Split social links to its own component

This commit is contained in:
LordMathis 2019-11-07 21:45:47 +01:00
parent 8099a4b45e
commit 3a74bfcff6
No known key found for this signature in database
GPG Key ID: 575849FD91CE470C
5 changed files with 95 additions and 61 deletions

View File

@ -1,6 +1,7 @@
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import { SocialLinks } from '.'
import '../stylesheets/globals.scss'
import styles from './Home.scss'
@ -9,51 +10,22 @@ export default class Home extends Component {
config: PropTypes.object.isRequired
}
render () {
let key = 0
const objKeys = Object.keys(this.props.config.social)
const socialLinks = objKeys.map((val) => {
const link = (
<li key={key}>
<a href={this.props.config.social[val]} role="link">
<i className={`fa fa-${val} fa-3x`} aria-hidden="true" />
<span className="sr-only">{val}</span>
</a>
</li>
)
key += 1
return link
})
socialLinks.push(
<li key={key}>
<a href={`mailto:${this.props.config.email}`} role="link">
<i className="fa fa-envelope-o fa-3x" aria-hidden="true" />
<span className="sr-only">e-mail</span>
</a>
</li>
)
render () {
return (
<div id={styles.coverPage} className={styles.coverPageFull} role="region" aria-label="Home page">
<div id={styles.coverPageContent}>
<div role="heading" aria-level="1">
<h1 id={styles.coverPageName}><Link to="/">{ this.props.config.name }</Link></h1>
</div>
<div className={styles.social} role="list">
<ul>
{socialLinks}
</ul>
</div>
<SocialLinks config={ this.props.config }/>
<div className={styles.menuLinks} role="navigation">
<ul>
<li>
<li key="about">
<a href="#about">
About
</a>
</li>
<li>
<li key="blog">
<span>/ <a href="#blog">Blog</a></span>
</li>
</ul>

View File

@ -1,5 +1,6 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { SocialLinks } from '.'
import '../stylesheets/globals.scss'
import styles from './Navbar.scss'
@ -10,52 +11,28 @@ export default class Navbar extends Component {
}
render () {
let key = 0
const objKeys = Object.keys(this.props.config.social)
const socialLinks = objKeys.map((val) => {
const link = (
<a key={key} href={this.props.config.social[val]}>
<i className={`fa fa-${val}`} aria-hidden="true" />
<span className="sr-only">{val}</span>
</a>
)
key += 1
return link
})
socialLinks.push(
<a key={key} href={`mailto:${this.props.config.email}`}>
<i className="fa fa-envelope-o" aria-hidden="true" />
<span className="sr-only">e-mail</span>
</a>
)
return (
<div className={styles.navbar} role="navigation">
<div className={styles.links}>
<ul>
<li>
<li key="index">
<a href='/'>
<span className={styles.nameLink}>{this.props.config.name} |</span>
</a>
</li>
<li>
<li key="about">
<a href='/#about'>
<span>About</span>
</a>
</li>
<li>
<li key="blog">
<a href='/#blog'>
<span>Blog</span>
</a>
</li>
</ul>
</div>
<div className={styles.social}>
{socialLinks}
</div>
<SocialLinks config={ this.props.config } home={ false }/>
</div>
)
}

View File

@ -0,0 +1,52 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import '../stylesheets/globals.scss'
import styles from './SocialLinks.scss'
export default class SocialLinks extends Component {
static propTypes = {
config: PropTypes.object.isRequired,
home: PropTypes.bool
}
static defaultProps = {
home: true
}
render () {
let key = 0
const objKeys = Object.keys(this.props.config.social)
const socialLinks = objKeys.map((val) => {
const link = (
<li key={key}>
<a href={this.props.config.social[val]} role="link">
<i className={`fa fa-${val} ${this.props.home ? 'fa-3x': ''}`} aria-hidden="true" />
<span className="sr-only">{val}</span>
</a>
</li>
)
key += 1
return link
})
socialLinks.push(
<li key={key}>
<a href={`mailto:${this.props.config.email}`} role="link">
<i className={`fa fa-envelope-o ${this.props.home ? 'fa-3x': ''}`} aria-hidden="true" />
<span className="sr-only">e-mail</span>
</a>
</li>
)
const className = this.props.home ? styles['social-home'] : styles['social-navbar']
return (
<div className={className} role="list">
<ul>
{socialLinks}
</ul>
</div>
)
}
}

View File

@ -0,0 +1,32 @@
@import "../stylesheets/variables.scss";
.social-home {
text-align: center;
ul {
list-style: none;
li {
display: inline;
}
}
}
.social-navbar {
float: right;
vertical-align: bottom;
}
.social-home, .social-navbar {
ul {
list-style: none;
li {
display: inline;
}
}
a {
color: $white;
text-shadow: $black 0px 0px 2px;
-webkit-font-smoothing: antialiased;
display: inline-block;
margin: 10px;
}
}

View File

@ -9,3 +9,4 @@ export { default as Header } from './Header'
export { default as Wrapper } from './Wrapper'
export { default as Navbar } from './Navbar'
export { default as App } from './App'
export { default as SocialLinks } from './SocialLinks'