import Mail from './mail.svg' import Facebook from './facebook.svg' import Instagram from './instagram.svg' import Youtube from './youtube.svg' import Twitter from './twitter.svg' import Spotify from './spotify.svg' import AppleMusic from './applemusic.svg' import Lastfm from './lastfm.svg' // Icons taken from: https://simpleicons.org/ const components = { mail: Mail, facebook: Facebook, instagram: Instagram, youtube: Youtube, twitter: Twitter, spotify: Spotify, applemusic: AppleMusic, lastfm: Lastfm, } const SocialIcon = ({ kind, href, size = 8 }) => { 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-blue-500 dark:text-gray-200 dark:hover:text-blue-400 h-${size} w-${size}`} /> </a> ) } export default SocialIcon