legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: update social share button styles for improved UI consistency

Browse Source
This commit is contained in:
Ardeman 2025-03-09 09:09:54 +08:00
parent ecd1900acc
commit 09e5f84b8b
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
app/components/ui/social-share.tsx
View File

@ -35,37 +35,44 @@ export const SocialShareButtons = ({
return ( return (
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-2">
{showPopup && ( <button
<div className="absolute top-0 rounded-lg border-2 border-gray-400 bg-white p-2 shadow-lg"> onClick={handleCopyLink}
Link berhasil disalin! className="relative cursor-pointer"
</div> >
)} <LinkIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
<button onClick={handleCopyLink}> {showPopup && (
<LinkIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" /> <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> </button>
<FacebookShareButton <FacebookShareButton
url={url} url={url}
title={title} title={title}
> >
<FacebookIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" /> <FacebookIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
</FacebookShareButton> </FacebookShareButton>
<LinkedinShareButton <LinkedinShareButton
url={url} url={url}
title={title} title={title}
> >
<LinkedinIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" /> <LinkedinIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
</LinkedinShareButton> </LinkedinShareButton>
<TwitterShareButton <TwitterShareButton
url={url} url={url}
title={title} title={title}
> >
<XIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" /> <XIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
</TwitterShareButton> </TwitterShareButton>
<button onClick={handleInstagramShare}> <button
<InstagramIcon className="h-8 w-8 rounded-full bg-gray-400 p-2 sm:h-10 sm:w-10" /> onClick={handleInstagramShare}
className="cursor-pointer"
>
<InstagramIcon className="h-8 w-8 rounded-full bg-[#F4F4F4] p-2 sm:h-10 sm:w-10" />
</button> </button>
</div> </div>
) )