feat(share): enhance sharing functionality with social media integration and link copying
This commit is contained in:
@@ -9,8 +9,9 @@ import LinkedingBlueD from "@/components/icons/LinkedingBlueD";
|
|||||||
import html2canvas from "html2canvas";
|
import html2canvas from "html2canvas";
|
||||||
import jsPDF from "jspdf";
|
import jsPDF from "jspdf";
|
||||||
import { Button } from "@mui/material";
|
import { Button } from "@mui/material";
|
||||||
|
import { toast } from "react-toastify";
|
||||||
|
|
||||||
function List({ hiddenRef }) {
|
function List({ hiddenRef, data }) {
|
||||||
const handleDownloadPDF = async () => {
|
const handleDownloadPDF = async () => {
|
||||||
const element = hiddenRef.current;
|
const element = hiddenRef.current;
|
||||||
if (!element) return;
|
if (!element) return;
|
||||||
@@ -38,12 +39,51 @@ function List({ hiddenRef }) {
|
|||||||
pdf.save("poster.pdf");
|
pdf.save("poster.pdf");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getShareUrl = () =>
|
||||||
|
typeof window !== "undefined" ? window.location.href : "";
|
||||||
|
|
||||||
|
const getShareText = () =>
|
||||||
|
data?.name ? `معرفی ${data.name} در نوبت 724` : "معرفی پزشک در نوبت 724";
|
||||||
|
|
||||||
|
const openShareWindow = (url) => {
|
||||||
|
if (typeof window !== "undefined") {
|
||||||
|
window.open(url, "_blank", "noopener,noreferrer");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleWhatsapp = () => {
|
||||||
|
const text = encodeURIComponent(`${getShareText()}\n${getShareUrl()}`);
|
||||||
|
openShareWindow(`https://wa.me/?text=${text}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTelegram = () => {
|
||||||
|
const url = encodeURIComponent(getShareUrl());
|
||||||
|
const text = encodeURIComponent(getShareText());
|
||||||
|
openShareWindow(`https://t.me/share/url?url=${url}&text=${text}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLinkedin = () => {
|
||||||
|
const url = encodeURIComponent(getShareUrl());
|
||||||
|
openShareWindow(
|
||||||
|
`https://www.linkedin.com/sharing/share-offsite/?url=${url}`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCopyLink = async () => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(getShareUrl());
|
||||||
|
toast.success("لینک کپی شد");
|
||||||
|
} catch {
|
||||||
|
toast.error("کپی لینک ناموفق بود");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
const listIcons = [
|
const listIcons = [
|
||||||
{ name: "واتساپ", icon: <WhatsappBlueD /> },
|
{ name: "واتساپ", icon: <WhatsappBlueD />, onClick: handleWhatsapp },
|
||||||
{ name: "تلگرام", icon: <TelegramBlueD /> },
|
{ name: "تلگرام", icon: <TelegramBlueD />, onClick: handleTelegram },
|
||||||
{ name: "لینکدین", icon: <LinkedingBlueD /> },
|
{ name: "لینکدین", icon: <LinkedingBlueD />, onClick: handleLinkedin },
|
||||||
{ name: "کپی لینک", icon: <CopyBlueD /> },
|
{ name: "کپی لینک", icon: <CopyBlueD />, onClick: handleCopyLink },
|
||||||
{ name: "دانلود", icon: <DownloadBlue /> },
|
{ name: "دانلود", icon: <DownloadBlue />, onClick: handleDownloadPDF },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -60,7 +100,8 @@ function List({ hiddenRef }) {
|
|||||||
!w-[24px] sm:!w-[28px] md:!w-[32px] lg:!w-[36px]
|
!w-[24px] sm:!w-[28px] md:!w-[32px] lg:!w-[36px]
|
||||||
!h-[24px] sm:!h-[28px] md:!h-[32px] lg:!h-[36px]
|
!h-[24px] sm:!h-[28px] md:!h-[32px] lg:!h-[36px]
|
||||||
"
|
"
|
||||||
onClick={handleDownloadPDF}
|
onClick={item.onClick}
|
||||||
|
aria-label={item.name}
|
||||||
variant="text"
|
variant="text"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@@ -71,6 +112,9 @@ function List({ hiddenRef }) {
|
|||||||
{item.icon}
|
{item.icon}
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
|
<span className="text-[#525252] text-[10px] md:text-[11px] lg:text-[12px]">
|
||||||
|
{item.name}
|
||||||
|
</span>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ function Share({ data }) {
|
|||||||
<p className="text-[#525252] text-[11px] md:text-[12px] lg:text-[14px] font-normal">
|
<p className="text-[#525252] text-[11px] md:text-[12px] lg:text-[14px] font-normal">
|
||||||
شما می توانید این پزشک را با دیگران به اشتراک بگذارید:
|
شما می توانید این پزشک را با دیگران به اشتراک بگذارید:
|
||||||
</p>
|
</p>
|
||||||
<List hiddenRef={hiddenRef} />
|
<List hiddenRef={hiddenRef} data={data} />
|
||||||
</Box>
|
</Box>
|
||||||
</Modal>
|
</Modal>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user