dashboard design and functionality and data and page doctor and clinic change data

components/doctor/detailDoctor/List.js

@@ -0,0 +1,83 @@
+import { useRef } from "react";
+
+// 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;

components/doctor/detailDoctor/Share.js

@@ -1,27 +1,18 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 
 import { styleDefault } from "@/mui";
 import ShareDI from "@/components/icons/ShareDI";
 import { Box, Button, Modal } from "@mui/material";
 
 // Icons
-import CopyBlueD from "@/components/icons/CopyBlueD";
 import CloseModalD from "@/components/icons/CloseModalD";
-import WhatsappBlueD from "@/components/icons/WhatsappBlueD";
-import TelegramBlueD from "@/components/icons/TelegramBlueD";
-import LinkedingBlueD from "@/components/icons/LinkedingBlueD";
+import List from "./List";
+import Poster from "../poster";
 
-const listIcons = [
-  { name: "واتساپ", icon: <WhatsappBlueD /> },
-  { name: "تلگرام", icon: <TelegramBlueD /> },
-  { name: "لینکدین", icon: <LinkedingBlueD /> },
-  { name: "کپی لینک", icon: <CopyBlueD /> },
-  { name: "دانلود", icon: <CopyBlueD /> },
-];
-
-function Share() {
+function Share({ data }) {
+  const hiddenRef = useRef();
   const [open, setOpen] = useState(false);
 
   const handleOpen = () => setOpen(true);
@@ -37,12 +28,17 @@ function Share() {
         <ShareDI />
         <p className="hidden lg:flex">اشتراک گذاری</p>
       </Button>
+      <div className="fixed top-0 left-0 opacity-0 pointer-events-none -z-10">
+        <div ref={hiddenRef}>
+          <Poster data={data} />
+        </div>
+      </div>
       <Modal open={open} onClose={handleClose}>
         <Box
           sx={styleDefault}
-          className="!pt-[12px] md:!pt-[14px] lg:!py-[16px]
+          className="!pt-[12px] md:!pt-[14px] lg:!py-[16px] !overflow-hidden
                     !px-[12px] sm:!px-[16px] md:!px-[20px] lg:!px-[24px]
-                    !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] !rounded-[8px] overflow-hidden"
+                    !pb-[12px] sm:!pb-[16px] lg:!pb-[20px] !rounded-[8px]"
         >
           <div className="flex items-center justify-between w-full">
             <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
@@ -60,31 +56,7 @@ function Share() {
           <p className="text-[#525252] text-[11px] md:text-[12px] lg:text-[14px] font-normal">
             شما می توانید این پزشک را با دیگران به اشتراک بگذارید:
           </p>
-          <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]
-                                    "
-                  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>
+          <List data={data} hiddenRef={hiddenRef} />
         </Box>
       </Modal>
     </div>

components/doctor/detailDoctor/index.js

@@ -9,7 +9,7 @@ function DetailDoctor({ doctor }) {
   return (
     <div className="w-full lg:w-[59%]">
       <div className="hidden lg:flex">
-        <Share />
+        <Share data={doctor} />
       </div>
       <Title doctor={doctor} />
       <Link />