From 6c40e2311eace4eb63ca41b801d6b5f4e9958364 Mon Sep 17 00:00:00 2001 From: isra el Date: Mon, 13 Oct 2025 06:58:04 +0300 Subject: [PATCH] chore(web): improve social share copy and ui --- .../(components)/community-links.tsx | 360 +++++++++++------- 1 file changed, 213 insertions(+), 147 deletions(-) diff --git a/web/app/(app)/dashboard/(components)/community-links.tsx b/web/app/(app)/dashboard/(components)/community-links.tsx index 71273c1..34f0e89 100644 --- a/web/app/(app)/dashboard/(components)/community-links.tsx +++ b/web/app/(app)/dashboard/(components)/community-links.tsx @@ -1,45 +1,84 @@ -"use client" +'use client' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card' import { Button } from '@/components/ui/button' -import { Github, Heart, MessageSquare, Linkedin, Twitter, Share2, LinkIcon } from 'lucide-react' +import { + Github, + Heart, + MessageSquare, + Linkedin, + Twitter, + Share2, + LinkIcon, +} from 'lucide-react' +import Image from 'next/image' 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' +import { + DialogHeader, + DialogTitle, + Dialog, + DialogContent, +} from '@/components/ui/dialog' export default function CommunityLinks() { - const [socialOpen, setSocialOpen] = useState(false); - const [copiedUrl, setCopiedUrl] = useState(""); + const [socialOpen, setSocialOpen] = useState(false) + const [copiedUrl, setCopiedUrl] = useState('') const socials = [ - { icon: "/images/facebook.svg", url: "https://www.facebook.com/sharer/sharer.php?u=https://textbee.dev" }, - { icon: "/images/x.svg", url: "https://twitter.com/intent/tweet?url=https://textbee.dev&text=Check%20out%20TextBee!%20" }, - { icon: "/images/linkedin2.svg", url: "https://www.linkedin.com/sharing/share-offsite/?url=https://textbee.dev" }, - { icon: "/images/reddit.svg", url: "https://www.reddit.com/submit?url=https://textbee.dev&title=Check%20out%20TextBee!%20" }, - { icon: "/images/pinterest.svg", url: "https://pinterest.com/pin/create/button/?url=https://textbee.dev&description=Check%20out%20TextBee!%20&media=https://textbee.dev/og-image.png" }, - { icon: "/images/whatsapp.svg", url: "https://api.whatsapp.com/send?text=Check%20out%20TextBee!%20%20https://textbee.dev" }, - { icon: "/images/telegram.svg", url: "https://t.me/share/url?url=https://textbee.dev&text=Check%20out%20TextBee!%20" }, - { icon: "/images/gmail.svg", url: "mailto:?subject=Check%20out%20TextBee!%20&body=Here’s%20the%20link:%20https://textbee.dev" } -] -const [currentUrl,setCurrentUrl] = useState(socials[0].url); + { + icon: '/images/facebook.svg', + name: 'Facebook', + url: 'https://www.facebook.com/sharer/sharer.php?u=https://textbee.dev', + }, + { + icon: '/images/x.svg', + name: 'Twitter', + url: 'https://twitter.com/intent/tweet?url=https://textbee.dev&text=πŸš€+Just+discovered+@textbeedotdev+-+an+amazing+SMS+gateway+platform!+Perfect+for+those+who+need+reliable+sms+integration.', + }, + { + icon: '/images/linkedin2.svg', + name: 'LinkedIn', + url: 'https://www.linkedin.com/sharing/share-offsite/?url=https://textbee.dev', + }, + { + icon: '/images/reddit.svg', + name: 'Reddit', + url: 'https://www.reddit.com/submit?url=https://textbee.dev&title=textbee.dev+-+Developer-friendly+SMS+Gateway+Platform', + }, + { + icon: '/images/whatsapp.svg', + name: 'WhatsApp', + url: "https://api.whatsapp.com/send?text=Hey!+Check+out+textbee.dev+-+it's+a+fantastic+SMS+gateway+platform+perfect+for+those+who+need+reliable+sms+integration+πŸš€+https://textbee.dev", + }, + { + icon: '/images/telegram.svg', + name: 'Telegram', + url: 'https://t.me/share/url?url=https://textbee.dev&text=πŸ”₯+Found+an+awesome+SMS+gateway+platform+-+textbee.dev!+Great+for+those+who+need+reliable+sms+integration.', + }, + { + icon: '/images/gmail.svg', + name: 'Email', + url: "mailto:?subject=Check+out+textbee.dev+-+SMS+Gateway+Platform&body=Hi!%0A%0AI+wanted+to+share+textbee.dev+with+you+-+it's+an+excellent+SMS+gateway+platform+that's+perfect+for+those+who+need+reliable+sms+integration.%0A%0ACheck+it+out:+https://textbee.dev%0A%0ABest+regards!", + }, + ] + const [currentUrl, setCurrentUrl] = useState(socials[0].url) const copyToClipboard = (content: string) => { - navigator.clipboard.writeText(content); - setCopiedUrl(content); + navigator.clipboard.writeText(content) + setCopiedUrl(content) toast({ - title: "Link copied!", - description: "The Link has been copied to your clipboard.", - }); - setTimeout(() => setCopiedUrl(""), 3000); - }; + title: 'Link copied!', + description: 'The Link has been copied to your clipboard.', + }) + setTimeout(() => setCopiedUrl(''), 3000) + } return ( <> - -
- {/* +
+ {/* One-time Donation @@ -56,7 +95,7 @@ const [currentUrl,setCurrentUrl] = useState(socials[0].url); */} - {/* + {/* Support on Patreon @@ -73,137 +112,164 @@ const [currentUrl,setCurrentUrl] = useState(socials[0].url); */} - - - GitHub - - -

- Check out our source code and contribute to the project. -

- - - - - - - - - Discord - - -

- Join our community for support and updates. -

- - - - - - - - - X (Twitter) - - -

- Follow us on X for the latest updates and announcements. -

- - - - - - - - - LinkedIn - - -

- Connect with us on LinkedIn for updates and news. -

- - - - - - + - Share to social media + GitHub -

- Share textbee.dev via social medias +

+ Check out our source code and contribute to the project.

- - + + + -
- - - - - Social Share - - -

Share this link via

-
-
- {socials.map(({icon, url}) => ( - - ))} -
-

Copy Link

-
- {" "} - - {currentUrl} - -
- + + + + + + + X (Twitter) + + +

+ Follow us on X for the latest updates and announcements. +

+ + + + + + + + + LinkedIn + + +

+ Connect with us on LinkedIn for updates and news. +

+ + + + + + + + Spread the Word + + +

+ Help others discover textbee.dev by sharing it with your network. +

+ + + + +
+ + + + + Share textbee.dev with Others + +

+ Help us grow by sharing textbee.dev with your friends and + colleagues! +

+ + +
+
+

Choose your platform

+
+ {socials.map(({ icon, name, url }) => ( + + ))} +
+
+ +
+

Share link

+
+ + + {currentUrl} + +
+
+ + +
+
- ) }