98 lines
3.7 KiB
JavaScript
98 lines
3.7 KiB
JavaScript
"use client";
|
|
import { useCallback, useRef, useState } from "react";
|
|
|
|
import { styleDefault } from "@/mui";
|
|
import ShareDI from "@/components/icons/ShareDI";
|
|
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
|
|
className="!gap-1 !border-none lg:!border-[#EFEFEF] !p-2 !rounded-lg !text-[#525252] !text-[14px]"
|
|
onClick={handleOpen}
|
|
aria-label="اشتراک گذاری"
|
|
variant="outlined"
|
|
>
|
|
<ShareDI />
|
|
<p className="hidden lg:flex">اشتراک گذاری</p>
|
|
</Button>
|
|
<div className="fixed w-[1080px] h-[1527px] top-0 left-0 opacity-0 pointer-events-none -z-10">
|
|
<div ref={hiddenRef}>
|
|
{variant === "dark" ? (
|
|
<Poster data={data} onQrReady={handleQrReady} />
|
|
) : (
|
|
<PosterLight data={data} onQrReady={handleQrReady} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Modal open={open} onClose={handleClose}>
|
|
<Box
|
|
sx={styleDefault}
|
|
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]"
|
|
>
|
|
<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">
|
|
اشتراک گذاری
|
|
</p>
|
|
<Button
|
|
className="!min-w-0 !p-1"
|
|
onClick={handleClose}
|
|
variant="text"
|
|
>
|
|
<CloseModalD />
|
|
</Button>
|
|
</div>
|
|
<span className="block h-px w-full bg-[#EFEFEF] mt-[8px] mb-[8px] sm:mb-[10px] md:mb-[12px] lg:mb-[14px]"></span>
|
|
<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>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Share;
|