blob: 89ecee3fcde0f98f632cff7f8e187237f8050f09 (
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import dynamic from 'next/dynamic';
import type {
AnchorHTMLAttributes,
ComponentType,
FC,
SVGAttributes,
} from 'react';
import styles from './social-link.module.scss';
const GithubIcon: ComponentType<SVGAttributes<SVGElement>> = dynamic(
async () => import('../../../../assets/images/social-media/github.svg')
);
const GitlabIcon: ComponentType<SVGAttributes<SVGElement>> = dynamic(
async () => import('../../../../assets/images/social-media/gitlab.svg')
);
const LinkedInIcon: ComponentType<SVGAttributes<SVGElement>> = dynamic(
async () => import('../../../../assets/images/social-media/linkedin.svg')
);
const TwitterIcon: ComponentType<SVGAttributes<SVGElement>> = dynamic(
async () => import('../../../../assets/images/social-media/twitter.svg')
);
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>
);
};
|
