diff --git a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx index 548c85eb..70e7b034 100644 --- a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx +++ b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx @@ -20,6 +20,7 @@ export const ContactInfoForm = ({ setState((prevState) => ({ diff --git a/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx b/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx index 58e335d3..70a0a41f 100644 --- a/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx +++ b/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx @@ -4,9 +4,11 @@ import SocialShareBar from './SocialShareBar' export const GroupSubHeaderView = ({ item, shareBaseUrl, + platforms, }: { item: Item shareBaseUrl: string + platforms?: string[] }) => (
@@ -33,6 +35,7 @@ export const GroupSubHeaderView = ({ : window.location.protocol + '//' + window.location.host + '/item/' + item.id } title={item.name} + platforms={platforms} />
diff --git a/src/Components/Profile/Subcomponents/SocialShareBar.tsx b/src/Components/Profile/Subcomponents/SocialShareBar.tsx index f1f7656b..0fdb5070 100644 --- a/src/Components/Profile/Subcomponents/SocialShareBar.tsx +++ b/src/Components/Profile/Subcomponents/SocialShareBar.tsx @@ -1,3 +1,4 @@ +import { toast } from 'react-toastify' import SocialShareButton from './SocialShareButton' const SocialShareBar = ({ @@ -8,11 +9,68 @@ const SocialShareBar = ({ // eslint-disable-next-line react/prop-types platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email'], }) => { + const copyLink = () => { + navigator.clipboard + .writeText(url) + .then(() => { + toast.success('link copied to clipboard') + }) + .catch((error) => { + toast.error('Fehler beim Kopieren des Links: ', error) + }) + } return (
{platforms.map((platform) => ( ))} + {platforms.includes('email') && ( + copyLink()} + title='copy Link' + > + + + + + )} + {platforms.includes('clipboard') && ( +
copyLink()} + title='copy Link' + > + + + +
+ )}
) } diff --git a/src/Components/Profile/Subcomponents/SocialShareButton.tsx b/src/Components/Profile/Subcomponents/SocialShareButton.tsx index 8ccdedb4..bc294ab8 100644 --- a/src/Components/Profile/Subcomponents/SocialShareButton.tsx +++ b/src/Components/Profile/Subcomponents/SocialShareButton.tsx @@ -38,14 +38,35 @@ const platformConfigs = { ), bgColor: '#026466', }, - email: { - shareUrl: 'mailto:?subject={title}&body={url}', + whatsapp: { + shareUrl: 'https://api.whatsapp.com/send?text={title}%20{url}', icon: ( - - + + ), - bgColor: '#444444', + bgColor: '#25D366', + }, + telegram: { + shareUrl: 'https://t.me/share/url?url={url}&text={title}', + icon: ( + + + + ), + bgColor: '#0088cc', }, } @@ -72,6 +93,7 @@ const SocialShareButton = ({ platform, url, title }) => { color: 'white', backgroundColor: bgColor, }} + title={`share link ${platform === 'email' ? 'via email' : 'on ' + platform}`} > {React.cloneElement(icon, { className: 'tw-w-4 tw-h-4 tw-fill-current' })}