mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2026-03-01 12:44:17 +00:00
83 lines
2.6 KiB
TypeScript
83 lines
2.6 KiB
TypeScript
import { toast } from 'react-toastify'
|
|
|
|
import SocialShareButton from './SocialShareButton'
|
|
|
|
const SocialShareBar = ({
|
|
url,
|
|
title,
|
|
platforms = ['facebook', 'twitter', 'linkedin', 'xing', 'email'],
|
|
}: {
|
|
url: string
|
|
title: string
|
|
platforms?: string[]
|
|
}) => {
|
|
const copyLink = () => {
|
|
navigator.clipboard
|
|
.writeText(url)
|
|
.then(() => {
|
|
toast.success('link copied to clipboard')
|
|
return null
|
|
})
|
|
// eslint-disable-next-line promise/prefer-await-to-callbacks
|
|
.catch((error: never) => {
|
|
toast.error('Fehler beim Kopieren des Links: ', error)
|
|
})
|
|
}
|
|
return (
|
|
<div className='tw-flex tw-place-content-end tw-justify-end tw-space-x-2 tw-grow tw-min-w-fit tw-pl-2'>
|
|
{platforms.map((platform) => (
|
|
<SocialShareButton key={platform} platform={platform} url={url} title={title} />
|
|
))}
|
|
{platforms.includes('email') && (
|
|
<a
|
|
href={`mailto:?subject=${title}&body=${url}`}
|
|
target='_blank'
|
|
rel='noopener noreferrer'
|
|
className='tw-w-8 tw-h-8 tw-mt-2 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white hover:tw-cursor-pointer'
|
|
style={{
|
|
color: 'white',
|
|
backgroundColor: '#444',
|
|
}}
|
|
onClick={() => copyLink()}
|
|
title='share link via email'
|
|
>
|
|
<svg
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
viewBox='0 0 24 24'
|
|
fill='white'
|
|
className='tw-h-4 tw-w-4'
|
|
>
|
|
<path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z' />
|
|
</svg>
|
|
</a>
|
|
)}
|
|
{platforms.includes('clipboard') && (
|
|
<div
|
|
rel='noopener noreferrer'
|
|
className='tw-w-8 tw-h-8 tw-mt-2 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white hover:tw-cursor-pointer'
|
|
style={{
|
|
color: 'white',
|
|
backgroundColor: '#888',
|
|
}}
|
|
onClick={() => copyLink()}
|
|
title='copy Link'
|
|
>
|
|
<svg
|
|
stroke='currentColor'
|
|
fill='currentColor'
|
|
strokeWidth='0'
|
|
viewBox='0 0 256 256'
|
|
height='1.5em'
|
|
width='1.5em'
|
|
xmlns='http://www.w3.org/2000/svg'
|
|
>
|
|
<path d='M180,64H40A12,12,0,0,0,28,76V216a12,12,0,0,0,12,12H180a12,12,0,0,0,12-12V76A12,12,0,0,0,180,64ZM168,204H52V88H168ZM228,40V180a12,12,0,0,1-24,0V52H76a12,12,0,0,1,0-24H216A12,12,0,0,1,228,40Z'></path>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default SocialShareBar
|