From ea8c21ff21b96ba025887bf4abf1a75aa54812fb Mon Sep 17 00:00:00 2001 From: samlay77 Date: Sun, 12 Oct 2025 12:48:16 +0300 Subject: [PATCH] feat: added social media share links(community page) --- .../(components)/community-links.tsx | 109 +++++++++++++++++- web/public/images/facebook.svg | 55 +++++++++ web/public/images/gmail.svg | 2 + web/public/images/linkedin2.svg | 2 + web/public/images/pinterest.svg | 17 +++ web/public/images/reddit.svg | 24 ++++ web/public/images/telegram.svg | 7 ++ web/public/images/whatsapp.svg | 7 ++ web/public/images/x.svg | 1 + 9 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 web/public/images/facebook.svg create mode 100644 web/public/images/gmail.svg create mode 100644 web/public/images/linkedin2.svg create mode 100644 web/public/images/pinterest.svg create mode 100644 web/public/images/reddit.svg create mode 100644 web/public/images/telegram.svg create mode 100644 web/public/images/whatsapp.svg create mode 100644 web/public/images/x.svg diff --git a/web/app/(app)/dashboard/(components)/community-links.tsx b/web/app/(app)/dashboard/(components)/community-links.tsx index 525b0e8..aca28c3 100644 --- a/web/app/(app)/dashboard/(components)/community-links.tsx +++ b/web/app/(app)/dashboard/(components)/community-links.tsx @@ -1,11 +1,54 @@ +"use client" import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' -import { Github, Heart, MessageSquare, Linkedin, Twitter } from 'lucide-react' +import { Github, Heart, MessageSquare, Linkedin, Twitter, Share2, LinkIcon } from 'lucide-react' import Link from 'next/link' import { ExternalLinks } from '@/config/external-links' +import { useState } from 'react' +import { toast } from '@/hooks/use-toast' +import Image from 'next/image' +import { DialogHeader, DialogTitle, Dialog, DialogContent } from '@/components/ui/dialog' export default function CommunityLinks() { + const [socialOpen, setSocialOpen] = useState(false); + const [copiedUrl, setCopiedUrl] = useState(""); + const [index, setIndex] = useState(0); + const icons = [ + "/images/facebook.svg", + "/images/x.svg", + "/images/linkedin2.svg", + "/images/reddit.svg", + "/images/pinterest.svg", + "/images/whatsapp.svg", + "/images/telegram.svg", + "/images/gmail.svg", + ]; + + const socialLinks = [ + "https://www.facebook.com/sharer/sharer.php?u=https://textbee.dev", + "https://twitter.com/intent/tweet?url=https://textbee.dev&text=Check%20out%20TextBee!%20", + "https://www.linkedin.com/sharing/share-offsite/?url=https://textbee.dev", + "https://www.reddit.com/submit?url=https://textbee.dev&title=Check%20out%20TextBee!%20", + "https://pinterest.com/pin/create/button/?url=https://textbee.dev&description=Check%20out%20TextBee!%20&media=https://textbee.dev/og-image.png", + "https://api.whatsapp.com/send?text=Check%20out%20TextBee!%20%20https://textbee.dev", + "https://t.me/share/url?url=https://textbee.dev&text=Check%20out%20TextBee!%20", + "mailto:?subject=Check%20out%20TextBee!%20&body=Here’s%20the%20link:%20https://textbee.dev", + ]; + + const copyToClipboard = (content: string) => { + navigator.clipboard.writeText(content); + setCopiedUrl(content); + + toast({ + title: "Link copied!", + description: "The Link has been copied to your clipboard.", + }); + setTimeout(() => setCopiedUrl(""), 3000); + }; + return ( + <> +
{/* @@ -108,6 +151,70 @@ export default function CommunityLinks() { + + + Share to social media + + +

+ Share textbee.dev via social medias +

+ + + + +
+ + + + + Social Share + + +

Share this link via

+
+
+ {icons.map((icon, ind) => ( + + ))} +
+

Copy Link

+
+ {" "} + + {socialLinks[index]} + +
+ +
+ + + + ) } diff --git a/web/public/images/facebook.svg b/web/public/images/facebook.svg new file mode 100644 index 0000000..36de0c5 --- /dev/null +++ b/web/public/images/facebook.svg @@ -0,0 +1,55 @@ + + + + + + + + \ No newline at end of file diff --git a/web/public/images/gmail.svg b/web/public/images/gmail.svg new file mode 100644 index 0000000..2f294ae --- /dev/null +++ b/web/public/images/gmail.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/web/public/images/linkedin2.svg b/web/public/images/linkedin2.svg new file mode 100644 index 0000000..6f9ebb0 --- /dev/null +++ b/web/public/images/linkedin2.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/web/public/images/pinterest.svg b/web/public/images/pinterest.svg new file mode 100644 index 0000000..8df16ba --- /dev/null +++ b/web/public/images/pinterest.svg @@ -0,0 +1,17 @@ + + + + + Pinterest-color + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/web/public/images/reddit.svg b/web/public/images/reddit.svg new file mode 100644 index 0000000..bbd6ac7 --- /dev/null +++ b/web/public/images/reddit.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/web/public/images/telegram.svg b/web/public/images/telegram.svg new file mode 100644 index 0000000..1c692ee --- /dev/null +++ b/web/public/images/telegram.svg @@ -0,0 +1,7 @@ + + \ No newline at end of file diff --git a/web/public/images/whatsapp.svg b/web/public/images/whatsapp.svg new file mode 100644 index 0000000..024ecdf --- /dev/null +++ b/web/public/images/whatsapp.svg @@ -0,0 +1,7 @@ + + \ No newline at end of file diff --git a/web/public/images/x.svg b/web/public/images/x.svg new file mode 100644 index 0000000..26be660 --- /dev/null +++ b/web/public/images/x.svg @@ -0,0 +1 @@ +X \ No newline at end of file