80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
import { LinkIcon } from '@heroicons/react/24/solid'
|
|
import { useState } from 'react'
|
|
import {
|
|
FacebookShareButton,
|
|
LinkedinShareButton,
|
|
TwitterShareButton,
|
|
} from 'react-share'
|
|
|
|
import { FacebookIcon } from '~/components/icons/facebook'
|
|
import { InstagramIcon } from '~/components/icons/instagram'
|
|
import { LinkedinIcon } from '~/components/icons/linkedin'
|
|
import { XIcon } from '~/components/icons/x'
|
|
|
|
type SocialShareButtonsProperties = {
|
|
url: string
|
|
title: string
|
|
}
|
|
|
|
export const SocialShareButtons = ({
|
|
url,
|
|
title,
|
|
}: SocialShareButtonsProperties) => {
|
|
const [showPopup, setShowPopup] = useState(false)
|
|
|
|
const handleCopyLink = () => {
|
|
navigator.clipboard.writeText(url)
|
|
setShowPopup(true)
|
|
setTimeout(() => setShowPopup(false), 2000)
|
|
}
|
|
|
|
const handleInstagramShare = () => {
|
|
const instagramUrl = `https://www.instagram.com/direct/new/?text=${encodeURIComponent(title + ' ' + url)}`
|
|
window.open(instagramUrl, '_blank')
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center space-x-2">
|
|
<button
|
|
onClick={handleCopyLink}
|
|
className="relative cursor-pointer"
|
|
>
|
|
<LinkIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
|
|
{showPopup && (
|
|
<div className="absolute top-12 w-48 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg">
|
|
Link berhasil disalin!
|
|
</div>
|
|
)}
|
|
</button>
|
|
|
|
<FacebookShareButton
|
|
url={url}
|
|
title={title}
|
|
>
|
|
<FacebookIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
|
|
</FacebookShareButton>
|
|
|
|
<LinkedinShareButton
|
|
url={url}
|
|
title={title}
|
|
>
|
|
<LinkedinIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
|
|
</LinkedinShareButton>
|
|
|
|
<TwitterShareButton
|
|
url={url}
|
|
title={title}
|
|
>
|
|
<XIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
|
|
</TwitterShareButton>
|
|
|
|
<button
|
|
onClick={handleInstagramShare}
|
|
className="cursor-pointer"
|
|
>
|
|
<InstagramIcon className="size-8 rounded-full bg-[#F4F4F4] p-2 transition hover:bg-gray-200 hover:shadow active:bg-gray-300 sm:h-10 sm:w-10" />
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|