Embed.js

import { LeakAddOutlined } from "@mui/icons-material";
import { Button, Modal } from "@mui/material";
import { useState } from "react";
import ResourcePreview from "../recurso/[id]/components/resourcePreview";
import mecredApi, { mecredURL } from "@/axiosConfig";

export default function Embed({ open, onClose, learningObject }) {

    const [copied, setCopied] = useState(false)
    const [source, setSource] = useState(null)
    const width = 560;
    const height = 315;

    //const uri = mecredURL + "inline/" + learningObject.id;

    const iframe =
        `<iframe 
            width="${width}" 
            height="${height}" 
            src="https://www.mecred.mec.gov.br/embed/${learningObject?.id}" 
            title="${learningObject?.name}" 
            frameBorder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
            referrerpolicy="strict-origin-when-cross-origin" 
            allowFullScreen>
        </iframe>`

    return (
        <Modal
            open={open}
            onClose={onClose}
            className="flex justify-center place-items-center m-6"
        >
            <div className="flex flex-col bg-ice-HC-dark p-6 rounded-lg outline outline-1 outline-ice-HC-white">
                <div className="flex justify-center text-xl font-bold text-darkGray-HC-white m-5">Recurso Incorporado</div>

                <div className="flex flex-row justify-center">
                    <ResourcePreview learningObject={learningObject} setSource={setSource} />
                    <div className="flex w-[600px] items-center text-darkGray-HC-white justify-center m-5 outline outline-1 outline-darkGray-HC-white rounded-lg p-5">
                        {iframe}
                    </div>
                </div>

                <div className="flex flex-col p-3 justify-end">
                    <div className="flex text-base font-bold text-darkGray-HC-white justify-end">
                        <Button
                            disableElevation
                            variant="outlined"
                            className="border text-lg normal-case text-darkGray-HC-white hover:bg-darkGray-HC-white hover:text-white-HC-dark border-lightGray-HC-white"
                            onClick={() => {
                                navigator.clipboard.writeText(iframe);
                                setCopied(true);
                            }}
                        >
                            {copied ? <span>Copiado!</span> : <span>Copiar</span>}
                        </Button>
                    </div>
                </div>
            </div>
        </Modal >
    );
}