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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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 |
|
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)}>×</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 |
|
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 |
|
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 & 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 |
|
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>
);
}
