62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { motion, useReducedMotion } from 'framer-motion'
|
|
import { moveInBottom, getAnimationProps } from '../atoms/Transitions'
|
|
import Icon from '../atoms/Icon'
|
|
import { useResume } from '../../hooks/use-resume'
|
|
import {
|
|
link,
|
|
title,
|
|
small as styleSmall,
|
|
networks
|
|
} from './Networks.module.css'
|
|
|
|
const linkClasses = (key) =>
|
|
key === 'Mail' ? `u-email ${link}` : `u-url ${link}`
|
|
|
|
const NetworkLink = ({ name, url }) => (
|
|
<a
|
|
className={linkClasses(name)}
|
|
href={url}
|
|
data-testid={`network-${name.toLowerCase()}`}
|
|
>
|
|
<Icon name={name} />
|
|
<span className={title}>{name}</span>
|
|
</a>
|
|
)
|
|
|
|
NetworkLink.propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
url: PropTypes.string.isRequired
|
|
}
|
|
|
|
export default function Networks({ small, hide }) {
|
|
const { basics } = useResume()
|
|
const shouldReduceMotion = useReducedMotion()
|
|
const isSSr = typeof window === 'undefined'
|
|
if (hide) return null
|
|
|
|
return (
|
|
<motion.aside
|
|
variants={moveInBottom}
|
|
{...getAnimationProps(shouldReduceMotion, isSSr)}
|
|
className={small ? styleSmall : networks}
|
|
>
|
|
<NetworkLink name="Mail" url={`mailto:${basics.email}`} />
|
|
|
|
{basics.profiles.map((profile) => (
|
|
<NetworkLink
|
|
key={profile.network}
|
|
name={profile.network}
|
|
url={profile.url}
|
|
/>
|
|
))}
|
|
</motion.aside>
|
|
)
|
|
}
|
|
|
|
Networks.propTypes = {
|
|
small: PropTypes.bool,
|
|
hide: PropTypes.bool
|
|
}
|