mirror/textbee
1
0
Fork 0
mirror of https://github.com/vernu/textbee.git synced 2026-05-18 21:35:12 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat: added social media share links(community page)

Browse Source
This commit is contained in:
samlay77
2025-10-12 12:48:16 +03:00
parent a9b1cd6549
commit ea8c21ff21
9 changed files with 223 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
web/app/(app)/dashboard/(components)/community-links.tsx
View File

@@ -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 (
<>
<div className='grid gap-4 md:grid-cols-2 lg:grid-cols-2'>
{/* <Card>
<CardHeader>
@@ -108,6 +151,70 @@ export default function CommunityLinks() {
</Link>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle> Share to social media</CardTitle>
</CardHeader>
<CardContent>
<p className="text-sm text-muted-foreground mb-4">
Share textbee.dev via social medias
</p>
<Button
variant="outline"
className="w-full"
onClick={() => setSocialOpen(true)}
>
<Share2 className="mr-2 h-4 w-4" /> Share to social media
</Button>
</CardContent>
</Card>
</div>
<Dialog open={socialOpen} onOpenChange={setSocialOpen}>
<DialogContent className="sm:max-w-[500px] text-base">
<DialogHeader>
<DialogTitle className="text-primary mb-3 text-xl">
Social Share
</DialogTitle>
</DialogHeader>
<p className="text-md">Share this link via</p>
<div className="flex flex-col gap-4">
<div className="flex justify-between bg-white rounded-md p-2 items-center">
{icons.map((icon, ind) => (
<button
key={icon}
type="button"
title={icon}
onClick={() => setIndex(ind)}
className={`${
index === ind
? "border-primary border-2"
: "border-gray-400"
} p-1 rounded-md border`}
>
<Image src={icon} alt="icon" width={24} height={24} />
</button>
))}
</div>
<p className="text-md">Copy Link</p>
<div className="flex items-center gap-2 border-2 rounded-md p-2 border-gray-500 w-full">
<LinkIcon className="w-7 h-7 flex-shrink-0 text-blue-600 dark:text-blue-400 font-bold" />{" "}
<Link
href={socialLinks[index]}
className="text-blue-500 dark:text-blue-400 break-all"
target="_blank"
>
{socialLinks[index]}
</Link>
</div>
<Button onClick={() => copyToClipboard(socialLinks[index])}>
Copy
</Button>
</div>
</DialogContent>
</Dialog>
</>
)
}

55
web/public/images/facebook.svg Normal file
View File

@@ -0,0 +1,55 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg version="1.1" id="Icons" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 32 32" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:#3A559F;}
.st2{fill:#F4F4F4;}
.st3{fill:#FF0084;}
.st4{fill:#0063DB;}
.st5{fill:#00ACED;}
.st6{fill:#FFEC06;}
.st7{fill:#FF0000;}
.st8{fill:#25D366;}
.st9{fill:#0088FF;}
.st10{fill:#314358;}
.st11{fill:#EE6996;}
.st12{fill:#01AEF3;}
.st13{fill:#FFFEFF;}
.st14{fill:#F06A35;}
.st15{fill:#00ADEF;}
.st16{fill:#1769FF;}
.st17{fill:#1AB7EA;}
.st18{fill:#6001D1;}
.st19{fill:#E41214;}
.st20{fill:#05CE78;}
.st21{fill:#7B519C;}
.st22{fill:#FF4500;}
.st23{fill:#00F076;}
.st24{fill:#FFC900;}
.st25{fill:#00D6FF;}
.st26{fill:#FF3A44;}
.st27{fill:#FF6A36;}
.st28{fill:#0061FE;}
.st29{fill:#F7981C;}
.st30{fill:#EE1B22;}
.st31{fill:#EF3561;}
.st32{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-miterlimit:10;}
.st33{fill:#0097D3;}
.st34{fill:#01308A;}
.st35{fill:#019CDE;}
.st36{fill:#FFD049;}
.st37{fill:#16A05D;}
.st38{fill:#4486F4;}
.st39{fill:none;}
.st40{fill:#34A853;}
.st41{fill:#4285F4;}
.st42{fill:#FBBC05;}
.st43{fill:#EA4335;}
</style>
<path class="st1" d="M23,0H9C4,0,0,4,0,9v14c0,5,4,9,9,9h14c5,0,9-4,9-9V9C32,4,28,0,23,0z"/>
<path class="st0" d="M26.8,15.4C26.6,15.2,26.3,15,26,15h-5v-3.8c0-0.1,0.1-0.2,0.2-0.2H25c0.6,0,1-0.4,1-1V7c0-0.6-0.4-1-1-1h-4
c-3.3,0-5,2.7-5,6v3h-4c-0.6,0-1,0.4-1,1v3c0,0.6,0.4,1,1,1h4v12h5V20h3c0.4,0,0.8-0.2,0.9-0.6l2-3C27.1,16.1,27,15.7,26.8,15.4z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

2
web/public/images/gmail.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" ?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 32 32" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><path d="M16.58,19.1068l-12.69-8.0757A3,3,0,0,1,7.1109,5.97l9.31,5.9243L24.78,6.0428A3,3,0,0,1,28.22,10.9579Z" fill="#ea4435"/><path d="M25.5,5.5h4a0,0,0,0,1,0,0v18a3,3,0,0,1-3,3h0a3,3,0,0,1-3-3V7.5a2,2,0,0,1,2-2Z" fill="#00ac47" transform="translate(53.0001 32.0007) rotate(180)"/><path d="M29.4562,8.0656c-.0088-.06-.0081-.1213-.0206-.1812-.0192-.0918-.0549-.1766-.0823-.2652a2.9312,2.9312,0,0,0-.0958-.2993c-.02-.0475-.0508-.0892-.0735-.1354A2.9838,2.9838,0,0,0,28.9686,6.8c-.04-.0581-.09-.1076-.1342-.1626a3.0282,3.0282,0,0,0-.2455-.2849c-.0665-.0647-.1423-.1188-.2146-.1771a3.02,3.02,0,0,0-.24-.1857c-.0793-.0518-.1661-.0917-.25-.1359-.0884-.0461-.175-.0963-.267-.1331-.0889-.0358-.1837-.0586-.2766-.0859s-.1853-.06-.2807-.0777a3.0543,3.0543,0,0,0-.357-.036c-.0759-.0053-.1511-.0186-.2273-.018a2.9778,2.9778,0,0,0-.4219.0425c-.0563.0084-.113.0077-.1689.0193a33.211,33.211,0,0,0-.5645.178c-.0515.022-.0966.0547-.1465.0795A2.901,2.901,0,0,0,23.5,8.5v5.762l4.72-3.3043a2.8878,2.8878,0,0,0,1.2359-2.8923Z" fill="#ffba00"/><path d="M5.5,5.5h0a3,3,0,0,1,3,3v18a0,0,0,0,1,0,0h-4a2,2,0,0,1-2-2V8.5a3,3,0,0,1,3-3Z" fill="#4285f4"/><path d="M2.5439,8.0656c.0088-.06.0081-.1213.0206-.1812.0192-.0918.0549-.1766.0823-.2652A2.9312,2.9312,0,0,1,2.7426,7.32c.02-.0475.0508-.0892.0736-.1354A2.9719,2.9719,0,0,1,3.0316,6.8c.04-.0581.09-.1076.1342-.1626a3.0272,3.0272,0,0,1,.2454-.2849c.0665-.0647.1423-.1188.2147-.1771a3.0005,3.0005,0,0,1,.24-.1857c.0793-.0518.1661-.0917.25-.1359A2.9747,2.9747,0,0,1,4.3829,5.72c.089-.0358.1838-.0586.2766-.0859s.1853-.06.2807-.0777a3.0565,3.0565,0,0,1,.357-.036c.076-.0053.1511-.0186.2273-.018a2.9763,2.9763,0,0,1,.4219.0425c.0563.0084.113.0077.169.0193a2.9056,2.9056,0,0,1,.286.0888,2.9157,2.9157,0,0,1,.2785.0892c.0514.022.0965.0547.1465.0795a2.9745,2.9745,0,0,1,.3742.21A2.9943,2.9943,0,0,1,8.5,8.5v5.762L3.78,10.9579A2.8891,2.8891,0,0,1,2.5439,8.0656Z" fill="#c52528"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

2
web/public/images/linkedin2.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#0A66C2" d="M12.225 12.225h-1.778V9.44c0-.664-.012-1.519-.925-1.519-.926 0-1.068.724-1.068 1.47v2.834H6.676V6.498h1.707v.783h.024c.348-.594.996-.95 1.684-.925 1.802 0 2.135 1.185 2.135 2.728l-.001 3.14zM4.67 5.715a1.037 1.037 0 01-1.032-1.031c0-.566.466-1.032 1.032-1.032.566 0 1.031.466 1.032 1.032 0 .566-.466 1.032-1.032 1.032zm.889 6.51h-1.78V6.498h1.78v5.727zM13.11 2H2.885A.88.88 0 002 2.866v10.268a.88.88 0 00.885.866h10.226a.882.882 0 00.889-.866V2.865a.88.88 0 00-.889-.864z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 724 B

17
web/public/images/pinterest.svg Normal file
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Pinterest-color</title>
<desc>Created with Sketch.</desc>
<defs>
</defs>
<g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Color-" transform="translate(-300.000000, -260.000000)" fill="#CC2127">
<path d="M324.001411,260 C310.747575,260 300,270.744752 300,284.001411 C300,293.826072 305.910037,302.270594 314.368672,305.982007 C314.300935,304.308344 314.357382,302.293173 314.78356,300.469924 C315.246428,298.522491 317.871229,287.393897 317.871229,287.393897 C317.871229,287.393897 317.106368,285.861351 317.106368,283.59499 C317.106368,280.038808 319.169518,277.38296 321.73505,277.38296 C323.91674,277.38296 324.972306,279.022755 324.972306,280.987123 C324.972306,283.180102 323.572411,286.462515 322.852708,289.502205 C322.251543,292.050803 324.128418,294.125243 326.640325,294.125243 C331.187158,294.125243 334.249427,288.285765 334.249427,281.36532 C334.249427,276.10725 330.707356,272.170048 324.263891,272.170048 C316.985006,272.170048 312.449462,277.59746 312.449462,283.659905 C312.449462,285.754101 313.064738,287.227377 314.029988,288.367613 C314.475922,288.895396 314.535191,289.104251 314.374316,289.708238 C314.261422,290.145705 313.996119,291.21256 313.886047,291.633092 C313.725172,292.239901 313.23408,292.460046 312.686541,292.234256 C309.330746,290.865408 307.769977,287.193509 307.769977,283.064385 C307.769977,276.248368 313.519139,268.069148 324.921503,268.069148 C334.085729,268.069148 340.117128,274.704533 340.117128,281.819721 C340.117128,291.235138 334.884459,298.268478 327.165285,298.268478 C324.577174,298.268478 322.138649,296.868584 321.303228,295.279591 C321.303228,295.279591 319.908979,300.808608 319.615452,301.875463 C319.107426,303.724114 318.111131,305.575587 317.199506,307.014994 C319.358617,307.652849 321.63909,308 324.001411,308 C337.255248,308 348,297.255248 348,284.001411 C348,270.744752 337.255248,260 324.001411,260" id="Pinterest">
</path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

24
web/public/images/reddit.svg Normal file
View File

@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Reddit" role="img"
viewBox="0 0 512 512">
<rect
width="512" height="512"
rx="15%"
fill="#f40"/>
<g fill="#ffffff">
<ellipse cx="256" cy="307" rx="166" ry="117"/>
<circle cx="106" cy="256" r="42"/>
<circle cx="407" cy="256" r="42"/>
<circle cx="375" cy="114" r="32"/>
</g>
Side by Side

After

Width:  |  Height:  |  Size: 766 B

7
web/public/images/telegram.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="Telegram" role="img"
viewBox="0 0 512 512"><rect
width="512" height="512"
rx="15%"
fill="#37aee2"/><path fill="#c8daea" d="M199 404c-11 0-10-4-13-14l-32-105 245-144"/><path fill="#a9c9dd" d="M199 404c7 0 11-4 16-8l45-43-56-34"/><path fill="#f6fbfe" d="M204 319l135 99c14 9 26 4 30-14l55-258c5-22-9-32-24-25L79 245c-21 8-21 21-4 26l83 26 190-121c9-5 17-3 11 4"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 538 B

7
web/public/images/whatsapp.svg Normal file
View File

@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg xmlns="http://www.w3.org/2000/svg"
aria-label="WhatsApp" role="img"
viewBox="0 0 512 512"><rect
width="512" height="512"
rx="15%"
fill="#25d366"/><path fill="#25d366" stroke="#ffffff" stroke-width="26" d="M123 393l14-65a138 138 0 1150 47z"/><path fill="#ffffff" d="M308 273c-3-2-6-3-9 1l-12 16c-3 2-5 3-9 1-15-8-36-17-54-47-1-4 1-6 3-8l9-14c2-2 1-4 0-6l-12-29c-3-8-6-7-9-7h-8c-2 0-6 1-10 5-22 22-13 53 3 73 3 4 23 40 66 59 32 14 39 12 48 10 11-1 22-10 27-19 1-3 6-16 2-18"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 604 B

1
web/public/images/x.svg Normal file
View File

@@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 252 B