react-share#LinkedinShareButton JavaScript Examples

The following examples show how to use react-share#LinkedinShareButton. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: share.js    From blog with Apache License 2.0 8 votes vote down vote up
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>
    </>
  );
}
Example #2
Source File: ShareButtons.jsx    From koronawirus.lol with GNU Affero General Public License v3.0 6 votes vote down vote up
ShareButtons = ({ }) => (
    <>
        <ShareButtonContainer>
            <FacebookShareButton url={url}>
                <FacebookIcon size={32} round />
            </FacebookShareButton>
            <button className="react-share__ShareButton" style={{ background: 'white', border: 0, margin: 0, paddingLeft: 0 }} onClick={() => {
                window.location.href = `fb-messenger://share?link=${url}`
            }}>
                <FacebookMessengerIcon size={32} round />
            </button>
            <TwitterShareButton url={url}>
                <TwitterIcon size={32} round />
            </TwitterShareButton>
            <TelegramShareButton url={url}>
                <TelegramIcon size={32} round />
            </TelegramShareButton>
            <LinkedinShareButton url={url}>
                <LinkedinIcon size={32} round />
            </LinkedinShareButton>
        </ShareButtonContainer>
    </>
)
Example #3
Source File: ShareButtons.jsx    From Corona-tracker with MIT License 6 votes vote down vote up
ShareButtons = () => {
  const url = 'https://coronatracker.squarespace.com';

  return (
    <>
      <FacebookShareButton url={url}>
        <FacebookIcon size={32} round />
      </FacebookShareButton>
      <LinkedinShareButton url={url}>
        <LinkedinIcon size={32} round />
      </LinkedinShareButton>
      <TwitterShareButton url={url}>
        <TwitterIcon size={32} round />
      </TwitterShareButton>
      <RedditShareButton url={url}>
        <RedditIcon size={32} round />
      </RedditShareButton>
      <TelegramShareButton url={url}>
        <TelegramIcon size={32} round />
      </TelegramShareButton>
    </>
  );
}
Example #4
Source File: index.js    From gatsby-blog-mdx with MIT License 6 votes vote down vote up
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>
  )
}
Example #5
Source File: share.js    From open-jobboard with Apache License 2.0 6 votes vote down vote up
Share = ({ socialConfig }) => {
    return 	(
        <div className="post-social">
            <FacebookShareButton url={socialConfig.config.url} className="button is-outlined is-rounded facebook" >
                <span className="icon">
                    <img alt="facebook icon" src={facebookIcon} />
                </span>
            </FacebookShareButton>
            <TwitterShareButton url={socialConfig.config.url} className="button is-outlined is-rounded twitter" title={socialConfig.config.title} via={socialConfig.twitterHandle.split('@').join('')}>
                <span className="icon">
                     <img alt="twiiter icon" src={twitterIcon} />
                </span>
            </TwitterShareButton>
            <LinkedinShareButton url={socialConfig.config.url} className="button is-outlined is-rounded linkedin" title={socialConfig.config.title} >
                <span className="icon">
                    <img alt="linkedin icon" src={linkedinIcon} />
                </span>
            </LinkedinShareButton>
        </div>
    )

}
Example #6
Source File: Share.js    From agility-website-gatsby with MIT License 6 votes vote down vote up
render() {

		if (typeof window === 'undefined') {
			return <div className="share"></div>
		}

		const item = this.props.item.customFields;

		return (
            <div className="share">
                <label>{item.shareLabel}</label>
                {item.facebook &&
                <FacebookShareButton quote={document.title} url={window.location.href} className="SocialMediaShareButton">
                    <FacebookIcon size={36} round />
                </FacebookShareButton>
                }
                {item.twitter &&
                <TwitterShareButton quote={document.title}  url={window.location.href} className="SocialMediaShareButton">
                    <TwitterIcon size={36} round />
                </TwitterShareButton>
                }
                {item.linkedIn &&
                <LinkedinShareButton quote={document.title}  url={window.location.href} className="SocialMediaShareButton">
                    <LinkedinIcon size={36} round />
                </LinkedinShareButton>
                }
            </div>

        );
	}
Example #7
Source File: social-share.js    From taskforce-fe-components with Mozilla Public License 2.0 6 votes vote down vote up
SocialsShare = ({ currentPage }) => {
  return (
    <div className="__social-share-container">
      <span>Distribuie pe</span>

      <FacebookShareButton url={currentPage}>
        <FacebookIcon round={true} size={30}></FacebookIcon>
      </FacebookShareButton>
      <LinkedinShareButton url={currentPage}>
        <LinkedinIcon round={true} size={30}></LinkedinIcon>
      </LinkedinShareButton>
      <TwitterShareButton url={currentPage}>
        <TwitterIcon round={true} size={30}></TwitterIcon>
      </TwitterShareButton>
    </div>
  );
}
Example #8
Source File: templateButtons.js    From fcgec-web-app with MIT License 6 votes vote down vote up
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>
    )
}
Example #9
Source File: Dashboard.js    From shopping-cart-fe with MIT License 5 votes vote down vote up
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>
  );
}
Example #10
Source File: ShareModal.js    From mern-social-media with MIT License 5 votes vote down vote up
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>
  );
}
Example #11
Source File: ClubEvent.jsx    From club-connect with GNU General Public License v3.0 4 votes vote down vote up
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>
  );
}
Example #12
Source File: App.js    From covid19action with MIT License 4 votes vote down vote up
function App() {
  const {
    history,
    location: { pathname },
  } = useReactRouter();

  useEffect(() => {
    if (!routes.includes(pathname)) {
      history.replace(routes[0]);
    }
    // eslint-disable-next-line
  }, []);

  const [state, dispatch] = useReducer(reducer, initialState);
  const i18n = state.i18n;

  const aRelevantLanguages = getValidLocale();

  const handleTabSelect = event => {
    history.push(mapTabToRoute(event.parameters.item.slot));
  };

  return (
    <div className="App">
      <div className="Covid19App">
        <div className="headerShellBar">
          <div className="shellBarLeft">
            <Button
              design={ButtonDesign.Transparent}
              icon="home"
              className="shellBarBtn"
              onClick={() => window.location.replace('https://myswastha.in/')}
            ></Button>
          </div>
          <div className="shellBarCenter">{i18n.HOME_TITLE}</div>
          <div className="shellBarRight">
            <Button
              design={ButtonDesign.Transparent}
              icon="world"
              className="shellBarBtn"
              onClick={() => dispatch({ type: 'openLanguageDialog' })}
            ></Button>
            <Button
              design={ButtonDesign.Transparent}
              icon="sys-help"
              className="shellBarIconBtn"
              onClick={() => dispatch({ type: 'openDialog' })}
            ></Button>
            <ActionSheet
              openBy={
                <Button
                  design={ButtonDesign.Transparent}
                  icon="share"
                  className="shellBarIconBtn"
                />
              }
              placement={'Bottom'}
            >
              <FacebookShareButton
                url="https://myswastha.in/"
                quote={i18n.SHARING_TITLE}
                hashtag="#MySwastha #FlattenTheCurve"
              >
                <FacebookIcon size={32} round={true} />
              </FacebookShareButton>
              <WhatsappShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <WhatsappIcon size={32} round={true} />
              </WhatsappShareButton>
              <TwitterShareButton
                url="https://myswastha.in/"
                title={i18n.SHARING_TITLE}
                hashtags={['FlattenTheCurve', 'MySwastha']}
                via={['nitish_mehta']}
              >
                <TwitterIcon size={32} round={true} />
              </TwitterShareButton>
              <LinkedinShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <LinkedinIcon size={32} round={true} />
              </LinkedinShareButton>
            </ActionSheet>
          </div>
        </div>
        <MessageStrip
          className="archivedNotification"
          icon={null}
          noCloseButton={true}
          noIcon={false}
          type={'Warning'}
        >
          NOTE: This app has been archived. <br />
          Kindly use{' '}
          <Link href="https://www.mygov.in/aarogya-setu-app/" target="_blank" wrap>
            Aarogya Setu{' '}
          </Link>{' '}
          app or{' '}
          <Link href="https://www.mohfw.gov.in/" target="_blank" wrap>
            Ministry of Health{' '}
          </Link>{' '}
          website for latest info. <b>Stay Safe &amp; Healthy !</b>
        </MessageStrip>

        <TabContainer className="c19IconTab" showOverflow onItemSelect={handleTabSelect} fixed>
          <Tab text={i18n.UNWELL} icon="stethoscope" selected={pathname === routes[0]}>
            <TabEligibilityChecker i18n={i18n} />
          </Tab>
          <Tab icon="notes" selected={pathname === routes[1]}>
            <TabIndiaInfo i18n={i18n} />
          </Tab>
          <Tab text={''} icon="business-objects-experience" selected={pathname === routes[2]}>
            <TabMoreInfo i18n={i18n} />
          </Tab>
        </TabContainer>

        <Dialog
          headerText={i18n.ABOUT_THIS_WEBSITE}
          stretch={false}
          open={state.isHelpDialogOpen}
          footer={
            <Button className="dialogFooterBtn" onClick={() => dispatch({ type: 'closeDialog' })}>
              {i18n.CLOSE}
            </Button>
          }
        >
          <div style={{ width: '300px', height: '400px' }}>
            <Label wrap className="disclaimerText">
              {i18n.WEBSITE_DISCLAIMER}
            </Label>
            <br />
            <br />
            <Label wrap>{i18n.WEBSITE_DESCRIPTION_1}</Label>
            <br />
            <br />
            <Label wrap>
              {i18n.WEBSITE_DESCRIPTION_2}{' '}
              <Link href="https://github.com/nitish-mehta/covid19action" target="_blank" wrap>
                GitHub{' '}
              </Link>
              {i18n.WEBSITE_DESCRIPTION_3}
            </Label>
            <br />
            <Label wrap>
              {i18n.WEBSITE_DESCRIPTION_4}{' '}
              <Link href="https://twitter.com/nitish_mehta" target="_blank" wrap>
                Twitter
              </Link>{' '}
              {i18n.AND}{' '}
              <Link href="https://www.linkedin.com/in/nitishmehta08/" target="_blank" wrap>
                LinkedIn.
              </Link>{' '}
            </Label>
            <br />
            <br />
            <Label wrap>{i18n.WEBSITE_DESCRIPTION_5}</Label>
            <br />
            <br />
            <FlexBox
              justifyContent={'SpaceBetween'}
              alignItems={'Stretch'}
              direction={'Row'}
              displayInline={false}
              fitContainer
            >
              <FacebookShareButton
                url="https://myswastha.in/"
                quote={i18n.SHARING_TITLE}
                hashtag="#MySwastha #FlattenTheCurve"
              >
                <FacebookIcon size={32} round={true} />
              </FacebookShareButton>
              <WhatsappShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <WhatsappIcon size={32} round={true} />
              </WhatsappShareButton>
              <TwitterShareButton
                url="https://myswastha.in/"
                title={i18n.SHARING_TITLE}
                hashtags={['FlattenTheCurve', 'MySwastha']}
                via={['nitish_mehta']}
              >
                <TwitterIcon size={32} round={true} />
              </TwitterShareButton>{' '}
              <LinkedinShareButton url="https://myswastha.in/" title={i18n.SHARING_TITLE}>
                <LinkedinIcon size={32} round={true} />
              </LinkedinShareButton>
            </FlexBox>
          </div>
        </Dialog>

        <Dialog
          headerText={'Change Language'}
          stretch={false}
          open={state.isLanguageDialogOpen}
          footer={
            <Button
              className="dialogFooterBtn"
              onClick={() => dispatch({ type: 'closeLanguageDialog' })}
            >
              {i18n.CLOSE}
            </Button>
          }
        >
          <div style={{ width: '250px', height: '300px' }}>
            <Link
              href="
                  https://github.com/nitish-mehta/covid19action#how-can-you-help"
              target="_blank"
              wrap
            >
              (Help Improve Translations)
            </Link>{' '}
            <ul>
              {aRelevantLanguages.map(currentVal => {
                return (
                  <li key={currentVal.code}>
                    <Button
                      design={ButtonDesign.Transparent}
                      onClick={() => {
                        dispatch({ type: 'closeLanguageDialog' });
                        dispatch({
                          type: 'i18nChange',
                          payload: changeCurrentLocale(currentVal.code),
                        });
                      }}
                    >
                      {currentVal.displayText}
                    </Button>
                  </li>
                );
              })}
            </ul>
          </div>
        </Dialog>
      </div>
    </div>
  );
}
Example #13
Source File: Share.js    From gez with MIT License 4 votes vote down vote up
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>
  );
}