mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-03-15 12:49:43 +01:00
Add sharing buttons in header
This commit is contained in:
Kamran Ahmed
parent
10b688049d
commit
a36bca2f42
3
public/images/hackernews.svg
Normal file
3
public/images/hackernews.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
|
||||
<path fill="#94a3b8" d="M5 5v22h22V5zm2 2h18v18H7zm4.5 4l3.5 6v5h2v-5l3.5-6h-2L16 15.281L13.5 11z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 203 B |
1
public/images/reddit.svg
Normal file
1
public/images/reddit.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="#94a3b8" d="M288 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0zm338.7 119.7c-23.1 18.2-68.9 37.8-114.7 37.8s-91.6-19.6-114.7-37.8c-14.4-11.3-35.3-8.9-46.7 5.5s-8.9 35.3 5.5 46.7C396.3 771.6 457.5 792 512 792s115.7-20.4 155.9-52.1a33.25 33.25 0 1 0-41.2-52.2zM960 456c0-61.9-50.1-112-112-112c-42.1 0-78.7 23.2-97.9 57.6c-57.6-31.5-127.7-51.8-204.1-56.5L612.9 195l127.9 36.9c11.5 32.6 42.6 56.1 79.2 56.1c46.4 0 84-37.6 84-84s-37.6-84-84-84c-32 0-59.8 17.9-74 44.2L603.5 123a33.2 33.2 0 0 0-39.6 18.4l-90.8 203.9c-74.5 5.2-142.9 25.4-199.2 56.2A111.94 111.94 0 0 0 176 344c-61.9 0-112 50.1-112 112c0 45.8 27.5 85.1 66.8 102.5c-7.1 21-10.8 43-10.8 65.5c0 154.6 175.5 280 392 280s392-125.4 392-280c0-22.6-3.8-44.5-10.8-65.5C932.5 541.1 960 501.8 960 456zM820 172.5a31.5 31.5 0 1 1 0 63a31.5 31.5 0 0 1 0-63zM120 456c0-30.9 25.1-56 56-56a56 56 0 0 1 50.6 32.1c-29.3 22.2-53.5 47.8-71.5 75.9a56.23 56.23 0 0 1-35.1-52zm392 381.5c-179.8 0-325.5-95.6-325.5-213.5S332.2 410.5 512 410.5S837.5 506.1 837.5 624S691.8 837.5 512 837.5zM868.8 508c-17.9-28.1-42.2-53.7-71.5-75.9c9-18.9 28.3-32.1 50.6-32.1c30.9 0 56 25.1 56 56c.1 23.5-14.5 43.7-35.1 52zM624 568a56 56 0 1 0 112 0a56 56 0 1 0-112 0z"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
@ -10,6 +10,9 @@ import { MarkFavorite } from './FeaturedItems/MarkFavorite';
|
||||
import { TeamVersions } from './TeamVersions/TeamVersions';
|
||||
import { CreateVersion } from './CreateVersion/CreateVersion';
|
||||
import { type RoadmapFrontmatter } from '../lib/roadmap';
|
||||
import { ShareRoadmapButton } from './ShareRoadmapButton';
|
||||
import { Share2 } from 'lucide-react';
|
||||
import ShareIcons from './ShareIcons/ShareIcons.astro';
|
||||
|
||||
export interface Props {
|
||||
title: string;
|
||||
@ -96,6 +99,12 @@ const hasTnsBanner = !!tnsBannerLink;
|
||||
←<span class='hidden sm:inline'> All Roadmaps</span>
|
||||
</a>
|
||||
|
||||
<ShareRoadmapButton
|
||||
description={description}
|
||||
pageUrl={`https://roadmap.sh/${roadmapId}`}
|
||||
client:idle
|
||||
/>
|
||||
|
||||
{isRoadmapReady && (
|
||||
<>
|
||||
<button
|
||||
@ -120,16 +129,6 @@ const hasTnsBanner = !!tnsBannerLink;
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
|
||||
<button
|
||||
data-guest-required
|
||||
data-popup='login-popup'
|
||||
class='inline-flex hidden 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'
|
||||
aria-label='Subscribe for Updates'
|
||||
>
|
||||
<Icon icon='email' />
|
||||
<span class='ml-2'>Subscribe</span>
|
||||
</button>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
135
src/components/ShareRoadmapButton.tsx
Normal file
135
src/components/ShareRoadmapButton.tsx
Normal file
@ -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…
x
Reference in New Issue
Block a user