shi.gg
The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
1import Link from "next/link";
2import { BsTwitter } from "react-icons/bs";
3import { HiShare } from "react-icons/hi";
4import { SiBluesky } from "react-icons/si";
5
6import { CopyToClipboardButton } from "./copy-to-clipboard";
7import { Button } from "./ui/button";
8import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
9
10const PLATFORMS = ["twitter", "bluesky"] as const;
11
12export function Share({
13 title,
14 url,
15 text
16}: {
17 title: string;
18 url: string;
19 text: string;
20}) {
21 return (
22 <div className="flex gap-2">
23 <CopyToClipboardButton
24 title={title}
25 text={url}
26 icon={<HiShare />}
27 />
28
29 {PLATFORMS.map((platform) => (
30 <ShareButton
31 key={platform}
32 platform={platform}
33 url={url}
34 text={text}
35 />
36 ))}
37 </div>
38 );
39}
40
41function ShareButton({
42 platform,
43 url,
44 text
45}: {
46 platform: string;
47 url: string;
48 text: string;
49}) {
50 const intentUrl = getIntentLink(platform, url, text + "\n");
51
52 return (
53 <Tooltip>
54 <TooltipTrigger asChild>
55 <Button asChild>
56 <Link
57 href={intentUrl}
58 target="_blank"
59 >
60 <Icon platform={platform} />
61 </Link>
62 </Button>
63 </TooltipTrigger>
64
65 <TooltipContent>
66 Share on {platform.replace(/^\w/, (char) => char.toUpperCase())}
67 </TooltipContent>
68 </Tooltip>
69 );
70}
71
72function getIntentLink(platform: string, url: string, text: string) {
73 switch (platform) {
74 case "twitter": return `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
75 case "bluesky": return `https://bsky.app/intent/compose?text=${encodeURIComponent(text + url)}`;
76 }
77
78 return "";
79}
80
81function Icon({ platform }: { platform: string; }) {
82 switch (platform) {
83 case "twitter": return <BsTwitter />;
84 case "bluesky": return <SiBluesky />;
85 }
86}