50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import { siBluesky, siX, siFacebook, siReddit } from 'simple-icons';
|
|
import { ExternalLink } from '@/components/common/ExternalLink';
|
|
|
|
type ShareLinksProps = {
|
|
url: string;
|
|
title: string;
|
|
description?: string;
|
|
};
|
|
|
|
export function ShareLinks({ url, title, description }: ShareLinksProps) {
|
|
const shareText = `Check out this post: ${title} - ${description}\n\n${url}`;
|
|
|
|
const networks = [
|
|
{
|
|
name: 'Bluesky',
|
|
icon: siBluesky,
|
|
href: `https://bsky.app/intent/compose?text=${encodeURIComponent(shareText)}`,
|
|
},
|
|
{
|
|
name: 'X',
|
|
icon: siX,
|
|
href: `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}`,
|
|
},
|
|
{
|
|
name: 'Facebook',
|
|
icon: siFacebook,
|
|
href: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(url)}`,
|
|
},
|
|
{
|
|
name: 'Reddit',
|
|
icon: siReddit,
|
|
href: `https://www.reddit.com/submit?url=${encodeURIComponent(url)}&title=${encodeURIComponent(
|
|
title,
|
|
)}&text=${encodeURIComponent(description ?? '')}`,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="flex gap-4 mx-auto">
|
|
{networks.map(({ name, icon, href }) => (
|
|
<ExternalLink key={name} href={href}>
|
|
<svg
|
|
dangerouslySetInnerHTML={{ __html: icon.svg }}
|
|
className="inline-block w-6 h-6 mr-1 fill-current hover:text-accent transition-colors"
|
|
/>
|
|
</ExternalLink>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|