Kamran Ahmed
1 year ago
parent
10b688049d
commit
a36bca2f42
4 changed files with 148 additions and 10 deletions
|
After Width: | Height: | Size: 203 B |
|
After Width: | Height: | Size: 1.3 KiB |
@ -0,0 +1,135 @@ |
||||
import { Check, Copy, Facebook, Linkedin, Share2, Twitter } from 'lucide-react'; |
||||
import { useRef, useState } from 'react'; |
||||
import { useOutsideClick } from '../hooks/use-outside-click.ts'; |
||||
import { useCopyText } from '../hooks/use-copy-text.ts'; |
||||
import { cn } from '../lib/classname.ts'; |
||||
|
||||
type ShareRoadmapButtonProps = { |
||||
description: string; |
||||
pageUrl: string; |
||||
}; |
||||
|
||||
export function ShareRoadmapButton(props: ShareRoadmapButtonProps) { |
||||
const { description, pageUrl } = props; |
||||
|
||||
const { isCopied, copyText } = useCopyText(); |
||||
|
||||
const containerRef = useRef<HTMLDivElement>(null); |
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false); |
||||
|
||||
const twitterUrl = `https://twitter.com/intent/tweet?text=${description}&url=${pageUrl}`; |
||||
const fbUrl = `https://www.facebook.com/sharer/sharer.php?quote=${description}&u=${pageUrl}`; |
||||
const hnUrl = `https://news.ycombinator.com/submitlink?t=${description}&u=${pageUrl}`; |
||||
const redditUrl = `https://www.reddit.com/submit?title=${description}&url=${pageUrl}`; |
||||
const linkedinUrl = `https://www.linkedin.com/shareArticle?mini=true&url=${pageUrl}&title=${description}`; |
||||
|
||||
useOutsideClick(containerRef, () => { |
||||
setIsDropdownOpen(false); |
||||
}); |
||||
|
||||
return ( |
||||
<div className="relative" ref={containerRef}> |
||||
<button |
||||
onClick={() => setIsDropdownOpen(!isDropdownOpen)} |
||||
className={cn( |
||||
'inline-flex items-center justify-center rounded-md bg-yellow-400 px-3 py-1.5 text-xs font-medium hover:bg-yellow-500 sm:text-sm', |
||||
{ |
||||
'bg-yellow-500': isDropdownOpen, |
||||
'bg-green-400': isCopied, |
||||
}, |
||||
)} |
||||
aria-label="Share Roadmap" |
||||
> |
||||
{!isCopied && ( |
||||
<> |
||||
<Share2 size="15px" /> |
||||
<span className="ml-2 hidden sm:inline">Share</span> |
||||
</> |
||||
)} |
||||
{isCopied && ( |
||||
<> |
||||
<Check size="15px" /> |
||||
<span className="ml-2 hidden sm:inline">Copied</span> |
||||
</> |
||||
)} |
||||
</button> |
||||
|
||||
{isDropdownOpen && ( |
||||
<div className="absolute left-0 z-50 mt-1 w-44 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5"> |
||||
<div className="flex flex-col px-1 py-1"> |
||||
<button |
||||
onClick={() => { |
||||
copyText(pageUrl); |
||||
setIsDropdownOpen(false); |
||||
}} |
||||
className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700" |
||||
> |
||||
<div className="flex w-[20px] items-center justify-center"> |
||||
<Copy size="15px" className="text-slate-400" /> |
||||
</div> |
||||
Copy Link |
||||
</button> |
||||
<a |
||||
href={twitterUrl} |
||||
target={'_blank'} |
||||
className="mt-1 flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700" |
||||
> |
||||
<div className="flex w-[20px] items-center justify-center"> |
||||
<Twitter size="16px" className="text-slate-400" /> |
||||
</div> |
||||
Share on Twitter |
||||
</a> |
||||
<a |
||||
href={fbUrl} |
||||
target={'_blank'} |
||||
className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700" |
||||
> |
||||
<div className="flex w-[20px] items-center justify-center"> |
||||
<Facebook size="16px" className="text-slate-400" /> |
||||
</div> |
||||
Facebook |
||||
</a> |
||||
<a |
||||
href={hnUrl} |
||||
target={'_blank'} |
||||
className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700" |
||||
> |
||||
<div className="flex w-[20px] items-center justify-center"> |
||||
<img |
||||
alt={'hackernews logo'} |
||||
src={'/images/hackernews.svg'} |
||||
className="h-5 w-5" |
||||
/> |
||||
</div> |
||||
Hacker News |
||||
</a> |
||||
<a |
||||
href={redditUrl} |
||||
target={'_blank'} |
||||
className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700" |
||||
> |
||||
<div className="flex w-[20px] items-center justify-center"> |
||||
<img |
||||
alt={'reddit logo'} |
||||
src={'/images/reddit.svg'} |
||||
className="h-5 w-5" |
||||
/> |
||||
</div> |
||||
Reddit |
||||
</a> |
||||
<a |
||||
href={linkedinUrl} |
||||
target={'_blank'} |
||||
className="flex w-full items-center gap-2 px-2 py-2 text-sm text-slate-100 hover:bg-slate-700" |
||||
> |
||||
<div className="flex w-[20px] items-center justify-center"> |
||||
<Linkedin size="16px" className="text-slate-400" /> |
||||
</div> |
||||
LinkedIn |
||||
</a> |
||||
</div> |
||||
</div> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
Loading…
Reference in new issue