blob: 1da1e7d344ecd0c6b633f3b64b701e32673d47ad (
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import type { AnchorHTMLAttributes, 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 = Omit<
AnchorHTMLAttributes<HTMLAnchorElement>,
'aria-label' | 'children' | 'href'
> & {
/**
* The social link icon.
*/
icon: SocialWebsite;
/**
* An accessible label for the link.
*/
label: string;
/**
* The social profile url.
*/
url: string;
};
/**
* SocialLink component
*
* Render a social icon link.
*/
export const SocialLink: FC<SocialLinkProps> = ({
className = '',
icon,
label,
url,
...props
}) => {
const linkClass = `${styles.link} ${className}`;
/**
* Retrieve a social link icon by id.
* @param {string} id - The social website id.
*/
const getIcon = (id: string) => {
switch (id) {
case 'Github':
return <GithubIcon aria-hidden className={styles.icon} />;
case 'Gitlab':
return <GitlabIcon aria-hidden className={styles.icon} />;
case 'LinkedIn':
return <LinkedInIcon aria-hidden className={styles.icon} />;
case 'Twitter':
default:
return <TwitterIcon aria-hidden className={styles.icon} />;
}
};
return (
<a {...props} aria-label={label} className={linkClass} href={url}>
{getIcon(icon)}
</a>
);
};
|
