feat: implement PosterLight component and enhance SiteLogo functionality for improved poster rendering

components/doctor/detailDoctor/List.js

@@ -76,12 +76,13 @@ function List({ hiddenRef, data, qrReady }) {
 
       try {
         const fontEmbedCSS = await getVazirEmbedCss();
-        imgData = await toPng(element, {
+        const options = {
           pixelRatio: 2,
           backgroundColor: "#ffffff",
           style: { opacity: "1" },
           fontEmbedCSS,
-        });
+        };
+        imgData = await toPng(element, options);
         pxWidth = element.offsetWidth * 2;
         pxHeight = element.offsetHeight * 2;
       } catch {

components/doctor/detailDoctor/Share.js

@@ -7,16 +7,29 @@ import { Box, Button, Modal } from "@mui/material";
 import CloseModalD from "@/components/icons/CloseModalD";
 import List from "./List";
 import Poster from "../poster";
+import PosterLight from "../poster/PosterLight";
+
+const VARIANTS = [
+  { key: "dark", label: "طرح تیره", swatch: "linear-gradient(135deg,#0B2A4A,#2E77C4)" },
+  { key: "light", label: "طرح روشن", swatch: "linear-gradient(135deg,#FFFFFF,#CFE2F6)" },
+];
 
 function Share({ data }) {
   const hiddenRef = useRef();
   const [open, setOpen] = useState(false);
   const [qrReady, setQrReady] = useState(false);
+  const [variant, setVariant] = useState("dark");
 
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);
   const handleQrReady = useCallback(() => setQrReady(true), []);
 
+  const changeVariant = (key) => {
+    if (key === variant) return;
+    setQrReady(false);
+    setVariant(key);
+  };
+
   return (
     <div className="w-full text-left">
       <Button
@@ -30,7 +43,11 @@ function Share({ data }) {
       </Button>
       <div className="fixed w-[1080px] h-[1350px] top-0 left-0 opacity-0 pointer-events-none -z-10">
         <div ref={hiddenRef}>
-          <Poster data={data} onQrReady={handleQrReady} />
+          {variant === "dark" ? (
+            <Poster data={data} onQrReady={handleQrReady} />
+          ) : (
+            <PosterLight data={data} onQrReady={handleQrReady} />
+          )}
         </div>
       </div>
       <Modal open={open} onClose={handleClose}>
@@ -56,6 +73,26 @@ function Share({ data }) {
           <p className="text-[#525252] text-[11px] md:text-[12px] lg:text-[14px] font-normal">
             شما می توانید این پزشک را با دیگران به اشتراک بگذارید:
           </p>
+          <div className="flex items-center justify-center gap-[10px] mt-[10px]">
+            {VARIANTS.map((v) => (
+              <button
+                key={v.key}
+                type="button"
+                onClick={() => changeVariant(v.key)}
+                className={`flex items-center gap-[6px] rounded-full border px-3 py-1.5 text-[11px] md:text-[12px] transition-colors ${
+                  variant === v.key
+                    ? "border-[#5559CE] text-[#5559CE] bg-[#EAECFA]"
+                    : "border-[#EFEFEF] text-[#525252] bg-white"
+                }`}
+              >
+                <span
+                  className="w-[14px] h-[14px] rounded-full border border-[#E0E0E0]"
+                  style={{ background: v.swatch }}
+                />
+                {v.label}
+              </button>
+            ))}
+          </div>
           <List hiddenRef={hiddenRef} data={data} qrReady={qrReady} />
         </Box>
       </Modal>