Ivan Li
3932a2b612
Some checks failed
🚀 Build and deploy by ftp / 🎉 Deploy (push) Failing after 8m21s
52 lines
1.0 KiB
TypeScript
52 lines
1.0 KiB
TypeScript
import {
|
|
Mail,
|
|
Github,
|
|
Facebook,
|
|
Youtube,
|
|
Linkedin,
|
|
Twitter,
|
|
Mastodon,
|
|
} from './icons';
|
|
|
|
const components = {
|
|
mail: Mail,
|
|
github: Github,
|
|
facebook: Facebook,
|
|
youtube: Youtube,
|
|
linkedin: Linkedin,
|
|
twitter: Twitter,
|
|
mastodon: Mastodon,
|
|
};
|
|
|
|
type SocialIconProps = {
|
|
kind: keyof typeof components;
|
|
href: string | undefined;
|
|
size?: number;
|
|
};
|
|
|
|
const SocialIcon = ({ kind, href, size = 8 }: SocialIconProps) => {
|
|
if (
|
|
!href ||
|
|
(kind === 'mail' &&
|
|
!/^mailto:\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/.test(href))
|
|
)
|
|
return null;
|
|
|
|
const SocialSvg = components[kind];
|
|
|
|
return (
|
|
<a
|
|
className="text-sm text-gray-500 transition hover:text-gray-600"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
href={href}>
|
|
<span className="sr-only">{kind}</span>
|
|
<SocialSvg
|
|
className={`fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-${size} w-${size}`}
|
|
/>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export default SocialIcon;
|