react-share#EmailShareButton JavaScript Examples

ShareButton = (props) => {
  const { location, siteMetadata, post } = props;
  const twitter = [ siteMetadata.social.twitter ];
  const url = siteMetadata.siteUrl + location.pathname;

  const iconSize = 30;
  const iconStyle = {
    paddingRight: "0.3em",
    marginBottom: "0.2em"
  };

  return (
    <>
      <TwitterShareButton url={url} quote={url} title={post.title} hashtags={post.tags} related={twitter} style={iconStyle}>
        <TwitterIcon size={iconSize}/>
      </TwitterShareButton>

      <LinkedinShareButton url={url} title={post.title} quote={url} source={siteMetadata.siteUrl} style={iconStyle}>
        <LinkedinIcon size={iconSize}/>
      </LinkedinShareButton>

      <FacebookShareButton url={url} quote={url} style={iconStyle}>
        <FacebookIcon size={iconSize}/>
      </FacebookShareButton>

      <RedditShareButton url={url} quote={url} title={post.title} style={iconStyle}>
        <RedditIcon size={iconSize}/>
      </RedditShareButton>

      <EmailShareButton url={url} quote={url} subject={post.title} style={iconStyle}>
        <EmailIcon size={iconSize}/>
      </EmailShareButton>
    </>
  );
}

ShareButtons = ({ location }) => {
  return (
    <div className="share-buttons-wrap">
      {config.shareButtons.email && (
        <EmailShareButton url={location}>
          <EmailIcon round size={32} />
        </EmailShareButton>
      )}
      {config.shareButtons.facebook && (
        <FacebookShareButton url={location}>
          <FacebookIcon round size={32} />
        </FacebookShareButton>
      )}
      {config.shareButtons.twitter && (
        <TwitterShareButton url={location}>
          <TwitterIcon round size={32} />
        </TwitterShareButton>
      )}
      {config.shareButtons.reddit && (
        <RedditShareButton url={location}>
          <RedditIcon round size={32} />
        </RedditShareButton>
      )}
      {config.shareButtons.linkedIn && (
        <LinkedinShareButton url={location}>
          <LinkedinIcon round size={32} />
        </LinkedinShareButton>
      )}
    </div>
  )
}

TemplateButtons = ({ where, slug }) => {

    let shareUrl;

    if (where === 'members')
        shareUrl = ` https://gecfoss.club/${slug}`
    else
        shareUrl = ` https://gecfoss.club/${where}/${slug}`

    if (where === 'members')
        shareUrl = shareUrl.replace(/^/, "Check out this FCGEC member's profile!\n");
    else if (where === 'blog')
        shareUrl = shareUrl.replace(/^/, "Check out this Blog post on FOSS Club GEC!\n");
    else if (where === 'events')
        shareUrl = shareUrl.replace(/^/, "Check out this Event on FOSS Club GEC!\n");
    else if (where === 'projects')
        shareUrl = shareUrl.replace(/^/, "Check out this Project on FOSS Club GEC!\n");

    return (
        <div className={templateButtonsStyles.buttons}>
            <BackButton where={where} />
            <div className={templateButtonsStyles.share}>
                <EmailShareButton url={shareUrl}>
                    <EmailIcon size={48} />
                </EmailShareButton>
                <WhatsappShareButton url={shareUrl}>
                    <WhatsappIcon size={48} />
                </WhatsappShareButton>
                <LinkedinShareButton url={shareUrl}>
                    <LinkedinIcon size={48} />
                </LinkedinShareButton>
                <TwitterShareButton url={shareUrl}>
                    <TwitterIcon size={48} />
                </TwitterShareButton>
            </div>
        </div>
    )
}

SocialMediaButtons = (props) => {
  const location = useLocation();

  let url;
  if (props.url) {
    url = props.url;
  } else {
    url = 'https://covid-19.direct' + location.pathname;
  }

  const bgStyle = {};
  if (props.backgroundColor) {
    bgStyle.fill = props.backgroundColor;
  }

  return (
    <div className={props.className}>
      {[
        [FacebookShareButton, FacebookIcon],
        [TwitterShareButton, TwitterIcon],
        [RedditShareButton, RedditIcon],
        [WhatsappShareButton, WhatsappIcon],
        [EmailShareButton, EmailIcon],
      ].map(([Button, Icon], i) => (
        <Button className={props.buttonClassName} url={url} quote={QUOTE} key={i}>
          <Icon
              size={props.size || '1em'}
              round={true}
              bgStyle={bgStyle}
              iconFillColor={props.iconColor}
          />
        </Button>
      ))}
    </div>
  );
}

Components = {
  Facebook: FacebookShareButton,
  Twitter: TwitterShareButton,
  Text: WhatsappShareButton,
  Email: EmailShareButton,
}

Dashboard = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(creators.getCurrentUser());
  }, [dispatch]);
  const user = useSelector((state) => state.user.user);
  const url = `${window.location.origin.toString()}/store/${
    user && user.storeName && user.storeName.toLowerCase().split(' ').join('-')
  }-${user && user._id}`;
  const storeLogo = user.imageUrl ? user.imageUrl : NoLogo;
  const copied = () => {
    message.success('url copied successfully');
  };
  return (
    <div className='mainDiv' data-testid='dashboardMainDiv'>
      <div className='dashboardHeader'>
        <div className='welcomeHeader'>
          Welcome, <br />
          <span className='name'>
            {user.ownerName ? user.ownerName : 'Seller'}!
          </span>
        </div>
        <div className='dashboardLogo'>
          <img src={storeLogo} alt='Store Logo' />
        </div>
      </div>
      <div className='storeUrl'>
        <p id='storeUrl' style={{ marginBottom: '1.3rem' }}>
          {user && url}
        </p>
        <CopyToClipboard text={url}>
          <span>
            <Button ghost onClick={copied}>
              Copy URL
            </Button>
          </span>
        </CopyToClipboard>
        <div className='share'>
          <FacebookShareButton url={user && url}>
            <FacebookIcon size={32} round />
          </FacebookShareButton>
          <TwitterShareButton url={user && url}>
            <TwitterIcon size={32} round />
          </TwitterShareButton>
          <LinkedinShareButton url={user && url}>
            <LinkedinIcon size={32} round />
          </LinkedinShareButton>
          <WhatsappShareButton url={user && url}>
            <WhatsappIcon size={32} round />
          </WhatsappShareButton>
          <EmailShareButton url={user && url}>
            <EmailIcon size={32} round />
          </EmailShareButton>
        </div>
      </div>
      <div className='dashDiv'>
        <Content storeId={user._id} currency={user.currency} />
      </div>
    </div>
  );
}

ShareModal = ({ url, theme, setIsShare }) => {
  return (
    <div className="share_modal">
      <div className="share_modal-container">
        <div className="share_modal-header">
          <span>Share to...</span>
          <span onClick={() => setIsShare(false)}>&times;</span>
        </div>
        <div
          className=" share_modal-body"
          style={{ filter: theme ? "invert(1)" : "invert(0)" }}
        >
          <FacebookShareButton url={url}>
            <FacebookIcon round={true} size={32} />
          </FacebookShareButton>

          <TwitterShareButton url={url}>
            <TwitterIcon round={true} size={32} />
          </TwitterShareButton>

          <EmailShareButton url={url}>
            <EmailIcon round={true} size={32} />
          </EmailShareButton>

          <TelegramShareButton url={url}>
            <TelegramIcon round={true} size={32} />
          </TelegramShareButton>

          <WhatsappShareButton url={url}>
            <WhatsappIcon round={true} size={32} />
          </WhatsappShareButton>

          <PinterestShareButton url={url}>
            <PinterestIcon round={true} size={32} />
          </PinterestShareButton>

          <RedditShareButton url={url}>
            <RedditIcon round={true} size={32} />
          </RedditShareButton>

          <LinkedinShareButton url={url}>
            <LineIcon round={true} size={32} />
          </LinkedinShareButton>
        </div>
      </div>
    </div>
  );
}

ShareModal = (props) => {
  const { onRequestClose, shareModalIsOpen, shareData } = props;

  Modal.setAppElement('#__next');

  return (
    <Modal
      className={clubEventStyles.ShareModal}
      isOpen={shareModalIsOpen}
      onRequestClose={onRequestClose}
      shouldCloseOnOverlayClick={true}
      closeTimeoutMS={200}
    >
      <h2>Share This Event</h2>
      <input type="text" value={shareData.eventUrl} readOnly />
      <div className={clubEventStyles.sharePlatforms}>
        <FacebookShareButton
          url={shareData.eventUrl}
          quote={shareData.shareDescription}
          hashtag={'#bccompsciclub'}
          disabled
        >
          <FacebookIcon size={32} round />
        </FacebookShareButton>

        <TwitterShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
          hashtags={['bccompsciclub']}
        >
          <TwitterIcon size={32} round />
        </TwitterShareButton>

        <LinkedinShareButton
          url={shareData.eventUrl}
          title={shareData.shareTitle}
          summary={shareData.shareDescription}
        >
          <LinkedinIcon size={32} round />
        </LinkedinShareButton>

        <FacebookMessengerShareButton url={shareData.eventUrl} disabled>
          <FacebookMessengerIcon size={32} round />
        </FacebookMessengerShareButton>

        <WhatsappShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
        >
          <WhatsappIcon size={32} round />
        </WhatsappShareButton>

        <TelegramShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
        >
          <TelegramIcon size={32} round />
        </TelegramShareButton>

        <LineShareButton
          url={shareData.eventUrl}
          title={shareData.shareDescription}
        >
          <LineIcon size={32} round />
        </LineShareButton>

        <EmailShareButton
          url={shareData.eventUrl}
          subject={shareData.shareTitle}
          body={`${shareData.shareDescription}\n\n`}
        >
          <EmailIcon size={32} round />
        </EmailShareButton>
      </div>
      <button className={clubEventStyles.closeButton} onClick={onRequestClose}>
        Close
      </button>
      <p>
        Sharing to Facebook and Facebook Messenger are currently unavailable.
        Sorry about that!
      </p>
    </Modal>
  );
}

MapContainer = ({ pins }) => {
  const theme = useTheme()
  const isBigEnough = useMediaQuery(theme.breakpoints.up('sm'))
  const { t } = useTranslation()
  const [email, setEmail] = useState()
  return (
    <Wrapper>
      <div style={{ paddingBottom: '2rem' }}>
        <MaxWidth>
          <Typography
            variant='h1'
            style={{
              fontSize: '2em',
              marginTop: '1.3rem',
              marginLeft: '0.5rem',
            }}
            gutterBottom
          >
            {t('title')}
          </Typography>
          {isBigEnough && (
            <Typography
              style={{
                fontSize: '1.3em',
                marginBottom: '1.3rem',
                marginLeft: '0.5rem',
              }}
              gutterBottom
              variant='h2'
            >
              {t('subtitle')}
            </Typography>
          )}
          <MapDiv>
            <Map pins={pins} />
          </MapDiv>
          <div
            style={{
              display: 'flex',
              flexDirection: 'row-reverse',
            }}
          >
            <FacebookShareButton
              style={{ marginRight: '0.5rem' }}
              url={'https://www.coviddash.org'}
              quote={'Volunteer for COVID-19 Vaccination trials near you'}
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via facebook',
                })
              }}
            >
              <FacebookIcon size={30} round={true} />
            </FacebookShareButton>
            <TwitterShareButton
              style={{ marginRight: '0.5rem' }}
              url={'https://www.coviddash.org'}
              title={'Volunteer for COVID-19 Vaccination trials near you'}
              hashtags={['COVID19', 'Volunteer', 'Coronavirus', 'Vaccines']}
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via twitter',
                })
              }}
            >
              <TwitterIcon size={30} round={true} />
            </TwitterShareButton>
            <PinterestShareButton
              url={'https://www.coviddash.org'}
              style={{ marginRight: '0.5rem' }}
              media={'https://coviddash.org/CovidTrialVolunteer.png'}
              className='mr-2'
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via pinterest',
                })
              }}
            >
              <PinterestIcon size={30} round={true} />
            </PinterestShareButton>
            <EmailShareButton
              style={{ marginRight: '0.5rem' }}
              subject={
                'I thought you might be interested in volunteering for COVID-19 Vaccination trials'
              }
              separator=' '
              body={
                'I thought you may be interested in volunteering to help save lives. Covidtrialdash.org helps you find vaccination trials near you.'
              }
              url={'https://www.covidtrialdash.org'}
              className='mr-2'
              openShareDialogOnClick={true}
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via email',
                })
              }}
            >
              <EmailIcon size={30} round={true} />
            </EmailShareButton>
            <WhatsappShareButton
              style={{ marginRight: '0.5rem' }}
              url={'https://www.coviddash.org'}
              title='Volunteer for COVID Vaccination trials in your area.'
              className='mr-2'
              onClick={() => {
                ReactGA.event({
                  category: 'volunteer',
                  action: 'Clicked share via whatsapp',
                })
              }}
            >
              <WhatsappIcon size={30} round={true} />
            </WhatsappShareButton>
          </div>
          <div
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
            }}
          >
            <div style={{ fontSize: '17px' }}>
              If you can&apos;t find a study now, or you&apos;d like to stay up
              to date, sign up for our email list!
            </div>
            <MailchimpSubscribe
              url={process.env.REACT_APP_MAILCHIMP_URL}
              render={({ subscribe, status, message }) => (
                <div style={{ marginTop: '1rem', width: '280px' }}>
                  <form
                    onSubmit={event => {
                      event.preventDefault()
                      subscribe({ EMAIL: email })
                    }}
                  >
                    <TextField
                      id='subscribe'
                      label='Your email'
                      variant='outlined'
                      style={{ width: '100%' }}
                      onChange={e => setEmail(e.target.value)}
                    />
                    <div style={{ marginTop: '1rem' }}>
                      <Button
                        type='submit'
                        fullWidth
                        variant='contained'
                        color='primary'
                      >
                        Subscribe
                      </Button>
                    </div>
                  </form>
                  {status === 'sending' && (
                    <p style={{ color: 'blue', textAlign: 'center' }}>
                      Sending...
                    </p>
                  )}
                  {status === 'error' && (
                    <p
                      style={{ color: 'red', textAlign: 'center' }}
                      dangerouslySetInnerHTML={{ __html: message }}
                    />
                  )}
                  {status === 'success' && (
                    <p style={{ color: 'green', textAlign: 'center' }}>
                      Subscribed!
                    </p>
                  )}
                </div>
              )}
            />
            <div style={{ fontSize: '17px', paddingTop: '2rem' }}>
              For immediate assistance, call us at +1 (224) 444-0082
            </div>
          </div>
        </MaxWidth>
      </div>
      <HomeSections />
    </Wrapper>
  )
}

ProductInfo = ({ product, home, reviews, variant, setVariant }) => {
  const [isVisible, setIsVisible] = useState(false);
  const location = useStoreState(state => state.user.location);
  const addToCart = useStoreActions(actions => actions.cart.add);
  // console.log('product', product);

  useEffect(() => {
    setTimeout(() => {
      setIsVisible(true);
    }, 400);
  }, []);

  const metaUrl = `${config.siteUrl}/product/${product.slug.current}`;
  const metaTitle = `Checkout ${product.title} at ${config.siteName}`;

  const handleAddToCart = () => {
    const price = getPrice(variant.pricing, true, location);
    ReactGA.plugin.execute('ecommerce', 'addItem', {
      id: product._id,
      title: product.title,
      sku: variant.sku || '-',
      price,
      // category: 'Cases',
      quantity: '1',
    });

    const itemData = {
      itemId: makeId(5),
      id: product._id,
      title: product.title,
      slug: product.slug.current,
      shippingCost: getPrice(product.shippingCost, false, location),
      sku: variant.sku,
      price,
      image: variant.featuredImage.asset.fluid.src,
      color: variant.color ? variant.color.hex : '',
      quantity: 1,
    };
    addToCart(itemData);

    setTimeout(() => navigateTo('/cart'), 600);
  };

  return (
    <>
      <RatingContainer>
        <i className="fas fa-star" />
        <i className="fas fa-star" />
        <i className="fas fa-star" />
        <i className="fas fa-star" />
        <i className="fas fa-star" />
        <span>{reviews.length} Reviews</span>
      </RatingContainer>
      <Heading centered>{product.title}</Heading>
      <Price className="has-text-weight-semibold has-text-centered">
        <CurrencyFormat pricing={variant.pricing} isDiscount />{' '}
        {variant.discountPrice < variant.price && (
          <span>
            <CurrencyFormat pricing={variant.pricing} />
          </span>
        )}
      </Price>
      <Spring native from={{ opacity: 0 }} to={{ opacity: isVisible ? 1 : 0 }}>
        {stylesProps => (
          <animated.div style={stylesProps}>
            <Variants>
              {product.otherVariants &&
                product.otherVariants.map(variantItem => {
                  return variantItem.color ? (
                    <VariantColor
                      key={variantItem.color.hex}
                      color={variantItem.color.hex}
                      active={
                        variant.color
                          ? variant.color.hex === variantItem.color.hex
                          : false
                      }
                      onClick={() => setVariant(variantItem)}
                    />
                  ) : null;
                })}
            </Variants>
            <BuyBtn
              className="product-info-btn button is-dark is-medium is-radiusless is-uppercase"
              // eslint-disable-next-line prettier/prettier
              onClick={() => handleAddToCart()}
            >
              Add to cart
            </BuyBtn>
            <ShippingInfo>Free Shipping to {location.country}.</ShippingInfo>
            <AccordionStyled>
              <AccordionItem expanded>
                <AccordionItemTitle>
                  <h3>Product Details</h3>
                </AccordionItemTitle>
                <AccordionItemBody>
                  {product._rawBody && (
                    <BlockContent blocks={product._rawBody.en || []} />
                  )}
                  <p>Made in India</p>
                  <p>All prices include sales taxes.</p>
                </AccordionItemBody>
              </AccordionItem>
              <AccordionItem>
                <AccordionItemTitle>
                  <h3>Delivery & Returns</h3>
                </AccordionItemTitle>
                <AccordionItemBody>
                  <ReactMarkdown source={home.productDeliveryInfo} />
                  <br />
                  <ReactMarkdown source={home.productShippingReturns} />
                </AccordionItemBody>
              </AccordionItem>
            </AccordionStyled>
            <ShareContainer>
              <h3>Share</h3>
              <div className="share-icons">
                <div className="level">
                  <div className="level-item">
                    <FacebookShareButton
                      url={metaUrl}
                      quote={metaTitle}
                      hashtag="#ecommerce"
                    >
                      <i className="fab fa-facebook-square" />
                    </FacebookShareButton>
                  </div>
                  <div className="level-item">
                    <TwitterShareButton
                      url={metaUrl}
                      title={metaTitle}
                      hashtags={['ecommerce']}
                    >
                      <i className="fab fa-twitter-square" />
                    </TwitterShareButton>
                  </div>
                  <div className="level-item">
                    <EmailShareButton url={metaUrl} subject={metaTitle}>
                      <i className="fas fa-envelope" />
                    </EmailShareButton>
                  </div>
                </div>
              </div>
            </ShareContainer>
          </animated.div>
        )}
      </Spring>
    </>
  );
}

export default function Share({ lang, url, title }) {
  const [share, setShare] = useState(false);
  const [copy, setCopy] = useState(false);

  return (
    <div
      className='relative inline-block text-left'
      onMouseOver={() => setShare(true)}
      onMouseLeave={() => setShare(false)}
    >
      <div>
        <span className='rounded-md shadow-sm'>
          <button
            type='button'
            className='text-xl font-medium bg-green-700 text-white p-2 rounded inline-flex items-center focus:outline-none transition ease-in-out duration-150'
            id='share-menu'
          >
            <svg
              fill='none'
              stroke='currentColor'
              strokeLinecap='round'
              strokeLinejoin='round'
              strokeWidth='2'
              viewBox='0 0 24 24'
              className='w-6 h-6'
            >
              <path d='M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z' />
            </svg>
            {lang.share}
          </button>
        </span>
      </div>

      <div
        className={`${
          !share ? 'hidden' : 'block'
        } origin-top-right absolute right-0  w-56 rounded-md shadow-lg text-center`}
      >
        <div
          className='rounded-md bg-white shadow-xs'
          role='menu'
          aria-orientation='vertical'
          aria-labelledby='share-menu'
        >
          <div className='py-1'>
            <div
              className='block px-2 py-1 text-sm leading-5 text-gray-700'
              role='menuitem'
            >
              <FacebookShareButton url={url} quote={title}>
                <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                  <svg
                    fill='none'
                    stroke='currentColor'
                    strokeLinecap='round'
                    strokeLinejoin='round'
                    strokeWidth='2'
                    viewBox='0 0 24 24'
                    className='w-6 h-6'
                  >
                    <path d='M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z' />
                  </svg>
                  <span>Facebook</span>
                </div>
              </FacebookShareButton>
            </div>
            <div
              className='block px-2 py-1 text-sm leading-5 text-gray-700'
              role='menuitem'
            >
              <TwitterShareButton url={url} title={title}>
                <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                  <svg
                    fill='none'
                    stroke='currentColor'
                    strokeLinecap='round'
                    strokeLinejoin='round'
                    strokeWidth='2'
                    viewBox='0 0 24 24'
                    className='w-6 h-6'
                  >
                    <path d='M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z' />
                  </svg>
                  <span>Twitter</span>
                </div>
              </TwitterShareButton>
            </div>
          </div>
          <div
            className='block px-2 py-1 text-sm leading-5 text-gray-700'
            role='menuitem'
          >
            <LinkedinShareButton url={url} title={title}>
              <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                <svg
                  fill='none'
                  stroke='currentColor'
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  viewBox='0 0 24 24'
                  className='w-6 h-6'
                >
                  <path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' />
                </svg>
                <span>LinkedIn</span>
              </div>
            </LinkedinShareButton>
          </div>
          <div
            className='block px-2 py-1 text-sm leading-5 text-gray-700'
            role='menuitem'
          >
            <WhatsappShareButton url={url} title={title}>
              <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                <svg
                  fill='none'
                  stroke='currentColor'
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  viewBox='0 0 24 24'
                  className='w-6 h-6'
                >
                  <path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z' />
                </svg>
                <span>WhatsApp</span>
              </div>
            </WhatsappShareButton>
          </div>
          <div className='border-t border-gray-100'></div>

          <div
            className='block px-2 py-1 text-sm leading-5 text-gray-700'
            role='menuitem'
          >
            <EmailShareButton url={url} subject={title}>
              <div className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'>
                <svg
                  fill='none'
                  stroke='currentColor'
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  viewBox='0 0 24 24'
                  className='w-6 h-6'
                >
                  <path d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' />
                </svg>
                <span>{lang.email}</span>
              </div>
            </EmailShareButton>
          </div>
          <div className='border-t border-gray-300'></div>
          <div className='py-1'>
            <div
              className='block px-2 py-1 text-sm leading-5 text-gray-700'
              role='menuitem'
            >
              <button
                className='text-xl border-solid border-gray-300 rounded-md hover:bg-gray-300 p-2 inline-flex'
                onClick={() =>
                  copyUrl(url) ||
                  setCopy(true) ||
                  setTimeout(() => {
                    setCopy(false);
                  }, 3000)
                }
              >
                <svg
                  fill='none'
                  stroke='currentColor'
                  strokeLinecap='round'
                  strokeLinejoin='round'
                  strokeWidth='2'
                  viewBox='0 0 24 24'
                  className='w-6 h-6'
                >
                  <path d='M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3' />
                </svg>
                <span>{lang.copyLink}</span>
              </button>
              {copy && <div>{lang.copyLinkSuccess}</div>}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}