82 lines
2.5 KiB
JavaScript
82 lines
2.5 KiB
JavaScript
// Icons
|
|
import CopyBlueD from "@/components/icons/CopyBlueD";
|
|
import DownloadBlue from "@/components/icons/DownloadBlue";
|
|
import WhatsappBlueD from "@/components/icons/WhatsappBlueD";
|
|
import TelegramBlueD from "@/components/icons/TelegramBlueD";
|
|
import LinkedingBlueD from "@/components/icons/LinkedingBlueD";
|
|
|
|
// Packages
|
|
import html2canvas from "html2canvas";
|
|
import jsPDF from "jspdf";
|
|
import { Button } from "@mui/material";
|
|
|
|
function List({ hiddenRef }) {
|
|
const handleDownloadPDF = async () => {
|
|
const element = hiddenRef.current;
|
|
if (!element) return;
|
|
|
|
const canvas = await html2canvas(element, {
|
|
backgroundColor: "#ffffff",
|
|
useCORS: true,
|
|
scale: 2,
|
|
});
|
|
|
|
const imgData = canvas.toDataURL("image/png");
|
|
|
|
const imgWidth = 210;
|
|
const imgProps = canvas;
|
|
const pxPerMm = imgProps.width / imgWidth;
|
|
const imgHeight = canvas.height / pxPerMm;
|
|
|
|
const pdf = new jsPDF({
|
|
orientation: "portrait",
|
|
unit: "mm",
|
|
format: [imgWidth, imgHeight],
|
|
});
|
|
|
|
pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
|
|
pdf.save("poster.pdf");
|
|
};
|
|
|
|
const listIcons = [
|
|
{ name: "واتساپ", icon: <WhatsappBlueD /> },
|
|
{ name: "تلگرام", icon: <TelegramBlueD /> },
|
|
{ name: "لینکدین", icon: <LinkedingBlueD /> },
|
|
{ name: "کپی لینک", icon: <CopyBlueD /> },
|
|
{ name: "دانلود", icon: <DownloadBlue /> },
|
|
];
|
|
|
|
return (
|
|
<>
|
|
<ul className="flex items-center mx-[60px] sm:mx-[86px] md:mx-[112px] lg:mx-[140px] justify-center mt-[8px] md:mt-[12px] lg:mt-[16px] gap-[24px] sm:gap-[26px] md:gap-[29px] lg:gap-[32px]">
|
|
{listIcons.map((item, idx) => (
|
|
<li
|
|
key={idx}
|
|
className="flex flex-col justify-center items-center w-fit gap-[2px]"
|
|
>
|
|
<Button
|
|
className="
|
|
!p-[0px] !bg-[#EAECFA] !rounded-full !min-w-0 grid place-items-center
|
|
!w-[24px] sm:!w-[28px] md:!w-[32px] lg:!w-[36px]
|
|
!h-[24px] sm:!h-[28px] md:!h-[32px] lg:!h-[36px]
|
|
"
|
|
onClick={handleDownloadPDF}
|
|
variant="text"
|
|
>
|
|
<div
|
|
className="grid place-items-center w-full-icon
|
|
!w-[16px] md:!w-[17px] lg:!w-[18px]
|
|
!h-[16px] md:!h-[17px] lg:!h-[18px]"
|
|
>
|
|
{item.icon}
|
|
</div>
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default List;
|