import React, { useState } from "react"; //style imports import { cardStyles } from "../../../styles"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import Typography from "@material-ui/core/Typography"; import FacebookIcon from "@material-ui/icons/Facebook"; import TwitterIcon from "@material-ui/icons/Twitter"; import EmailIcon from "@material-ui/icons/Email"; import MessageIcon from "@material-ui/icons/Message"; import LinkIcon from "@material-ui/icons/Link"; import IconButton from "@material-ui/core/IconButton"; import { CopyToClipboard } from "react-copy-to-clipboard"; import { useLocation } from "react-router-dom"; import { EmailShareButton, FacebookShareButton, TwitterShareButton, WhatsappShareButton, } from "react-share"; const shareButtons = [ { name: "Facebook", icon: FacebookIcon, }, { name: "Twitter", icon: TwitterIcon, }, { name: "Text", icon: MessageIcon, }, { name: "Email", icon: EmailIcon, }, ]; const Components = { Facebook: FacebookShareButton, Twitter: TwitterShareButton, Text: WhatsappShareButton, Email: EmailShareButton, }; const ParticipantCard = (props) => { const classes = cardStyles(); const location = useLocation(); const url = `https://ourneighborhoodchef.com${location.pathname}`; const [copied, setCopied] = useState(false); return ( <> <Card className={`${classes.root} ${classes.share}`}> <Typography variant="h6" align="left"> Share </Typography> <CardContent style={{ display: "flex", flexDirection: "column", padding: "5px", }} > <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "10px", }} > {shareButtons.map((b) => { const TagName = Components[b.name]; return ( <span key={b.name} title={b.name} className={cardStyles({ name: b.name }).shareButtons} > <TagName url={url} hashtag="#neighborhoodchef" key={b.name}> <b.icon fontSize="large" /> </TagName> </span> ); })} </div> <div style={{ display: "flex" }}> <Typography variant="caption" style={{ display: "flex", alignItems: "center", }} > Copy Link: <CopyToClipboard text={url} onCopy={() => setCopied(true)}> {copied ? ( <Typography color="textSecondary" style={{ marginLeft: "10px" }} > Copied! </Typography> ) : ( <IconButton style={{ marginLeft: "10px" }}> <LinkIcon fontSize="large" /> </IconButton> )} </CopyToClipboard> </Typography> </div> </CardContent> </Card> </> ); }; export default ParticipantCard;