2019-11-19 23:25:49 +01:00
|
|
|
import React from 'react'
|
|
|
|
import shortid from 'shortid'
|
2020-04-08 23:20:24 +02:00
|
|
|
import { useResume } from '../../../hooks/use-resume'
|
|
|
|
import Icon from '../../atoms/Icon'
|
2021-03-12 23:47:28 +01:00
|
|
|
import { title, description, contact, languagesList } from './Header.module.css'
|
2019-11-19 23:25:49 +01:00
|
|
|
|
|
|
|
export default function Header() {
|
|
|
|
const { basics, languages } = useResume()
|
|
|
|
const { name, label, email, website, location } = basics
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<header>
|
|
|
|
<p>Résumé</p>
|
2021-03-12 23:47:28 +01:00
|
|
|
<h1 className={title}>{name}</h1>
|
|
|
|
<h2 className={description}>{label}</h2>
|
2019-11-19 23:25:49 +01:00
|
|
|
</header>
|
|
|
|
|
|
|
|
<div>
|
2021-03-12 23:47:28 +01:00
|
|
|
<ul className={contact}>
|
2019-11-19 23:25:49 +01:00
|
|
|
<li>
|
|
|
|
<a href={website}>
|
|
|
|
<Icon name="Compass" />
|
|
|
|
Portfolio
|
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<Icon name="Mail" />
|
|
|
|
<a href={`mailto:${email}`}>Email</a>
|
|
|
|
</li>
|
|
|
|
<li>
|
|
|
|
<Icon name="MapPin" />
|
|
|
|
{location.city}, {location.countryCode}
|
|
|
|
</li>
|
2021-03-12 23:47:28 +01:00
|
|
|
<li className={languagesList}>
|
2019-11-19 23:25:49 +01:00
|
|
|
<Icon name="Globe" />
|
2020-03-21 23:55:40 +01:00
|
|
|
{languages.map((item) => (
|
2019-11-19 23:25:49 +01:00
|
|
|
<p key={shortid.generate()}>
|
|
|
|
{item.language}
|
|
|
|
<span>{item.fluency}</span>
|
|
|
|
</p>
|
|
|
|
))}
|
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|