45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import PopupWrapper from "../PopupWrapper";
|
||
import Button from "../ui/Button";
|
||
import ChevronLeftIcon from "../icons/ChevronLeftIcon";
|
||
import usePopupStore from "../../store/popupStore";
|
||
import SharePopup from "./SharePopup";
|
||
import QRCode from "react-qr-code";
|
||
|
||
interface QRCodePopupProps {
|
||
link: string;
|
||
}
|
||
|
||
function QRCodePopup({ link }: QRCodePopupProps) {
|
||
const { setPopup } = usePopupStore();
|
||
|
||
return (
|
||
<PopupWrapper
|
||
className="w-[21.667vw]"
|
||
draggable
|
||
leftButton={
|
||
<Button
|
||
variant="secondary"
|
||
size="small"
|
||
onClick={() => setPopup(<SharePopup link={link} />)}
|
||
>
|
||
<div className="2xl:size-[1.111vw] size-4">
|
||
<ChevronLeftIcon />
|
||
</div>
|
||
</Button>
|
||
}
|
||
>
|
||
<div className="flex flex-col 2xl:gap-y-[1.667vw] gap-y-6 items-center">
|
||
<QRCode value={link} className="2xl:size-[10.556vw] size-[152px]" />
|
||
<div className="2xl:space-y-[0.556vw] space-y-2">
|
||
<p className="title-m font-medium">Подключайтесь к сеансу</p>
|
||
<p className="caption-s font-medium text-center text-[#CCCCCC]">
|
||
Можно даже с мобильным интернетом
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</PopupWrapper>
|
||
);
|
||
}
|
||
|
||
export default QRCodePopup;
|