import React from "react" import { TwitterShareButton, TwitterIcon, RedditShareButton, RedditIcon, FacebookShareButton, FacebookIcon, } from "react-share" const buttonConfigs = { twitter: { Button: TwitterShareButton, Icon: TwitterIcon }, facebook: { Button: FacebookShareButton, Icon: FacebookIcon }, reddit: { Button: RedditShareButton, Icon: RedditIcon }, } const ShareButton = ({ className }) => { const shareUrl = "https://www.staticwebsitehosting.org" const shareText = "Check out Static Website Hosting, a leaderboard of static website hosting providers." return ( <div className={className}> {["twitter", "facebook", "reddit"].map(type => { const { Button, Icon } = buttonConfigs[type] return ( <Button url={shareUrl} title={shareText} className={`mx-1 shareicon-${type}`} > <Icon size={40} round bgStyle={{ fill: "#2D3748" }} /> </Button> ) })} </div> ) } export default ShareButton