import { useState, useEffect } from 'react'; import { Button, Modal } from "@mui/material"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; import SendOutlinedIcon from "@mui/icons-material/SendOutlined"; /** * @param {Object} props * @param {Boolean} props.open * @param {Function} props.onClose * @param {String} props.title Título do compartilhamento * @param {String} props.link URL a ser compartilhada */ export default function ShareModal({ open, onClose, title, link }) { const [clicked, setClicked] = useState(false); useEffect(() => { setClicked(false); }, [open]); function shareLink() { if (navigator.share) { navigator.share({ title: title, url: link, }) .then(() => console.log("Compartilhamento realizado com sucesso")) .catch((error) => console.error("Erro ao compartilhar:", error)); } else { console.log("Compartilhamento nativo não suportado"); } } return ( <Modal open={open} onClose={onClose} className="grid h-screen place-items-center m-5" slotProps={{ backdrop: { sx: { backgroundColor: "rgba(0, 0, 0, 0.3)", }, }, }} > <div> <div className="flex flex-col bg-ice-HC-dark p-6 rounded-lg items-center outline outline-1 outline-ice-HC-white"> <div className="text-xl font-bold text-darkGray-HC-white">{title}</div> <div className="p-3 mt-2 flex flex-col sm:flex-row"> <div> <Button disableElevation variant="outlined" className="border border-lightGray-HC-white text-darkGray-HC-white-underline hover:bg-darkGray-HC-white hover:text-white-HC-dark-underline text-lg normal-case flex gap-2 " sx={{ justifyContent: "start" }} onClick={() => { navigator.clipboard.writeText(link); setClicked(true); }} alt="Copiar link para o clipboard" > <ContentCopyIcon className="p-[1px]" /> {clicked ? <span>Copiado!</span> : <span>Copiar link!</span>} </Button> </div> {navigator.share ? ( <div className="mt-2 sm:mt-0 sm:ml-2"> <Button disableElevation variant="contained" className="bg-ice-HC-dark text-darkGray-HC-white-underline text-lg normal-case flex gap-2" onClick={shareLink} alt="Compartilhar link" > <SendOutlinedIcon className="p-[1px]" /> <span>Enviar</span> </Button> </div> ) : ""} </div> <div className="flex justify-center"> <button className="text-sm text-darkGray-HC-white-underline border-main rounded-lg normal-case h-9 font-bold bg-ice-HC-dark hover:bg-ice-HC-dark-hover" onClick={() => { onClose(); setClicked(false); }} > Fechar </button> </div> </div> </div> </Modal> ); }