blob: 9f8feb6eaca6bec3d2250e9c3ffdfbcfcdb1a754 (
plain)
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
|
import { FC } from 'react';
import GithubIcon from '../../../assets/images/social-media/github.svg';
import GitlabIcon from '../../../assets/images/social-media/gitlab.svg';
import LinkedInIcon from '../../../assets/images/social-media/linkedin.svg';
import TwitterIcon from '../../../assets/images/social-media/twitter.svg';
import styles from './social-link.module.scss';
export type SocialWebsite = 'Github' | 'Gitlab' | 'LinkedIn' | 'Twitter';
export type SocialLinkProps = {
/**
* The social website name.
*/
name: SocialWebsite;
/**
* The social profile url.
*/
url: string;
};
/**
* SocialLink component
*
* Render a social icon link.
*/
export const SocialLink: FC<SocialLinkProps> = ({ name, url }) => {
/**
* Retrieve a social link icon by id.
* @param {string} id - The social website id.
*/
const getIcon = (id: string) => {
switch (id) {
case 'Github':
return <GithubIcon className={styles.icon} aria-hidden="true" />;
case 'Gitlab':
return <GitlabIcon className={styles.icon} aria-hidden="true" />;
case 'LinkedIn':
return <LinkedInIcon className={styles.icon} aria-hidden="true" />;
case 'Twitter':
return <TwitterIcon className={styles.icon} aria-hidden="true" />;
default:
break;
}
};
return (
<a aria-label={name} className={styles.link} href={url}>
{getIcon(name)}
</a>
);
};
|
