add a download code button

This commit is contained in:
Abi Raja 2023-11-14 15:55:51 -05:00
parent fdecb93ea6
commit c0d1c23145

View File

@ -1,14 +1,14 @@
import { useState } from 'react'; import { useState } from "react";
interface Props { interface Props {
code: string; code: string;
} }
function Preview({ code }: Props) { function Preview({ code }: Props) {
const [blobUrl, setBlobUrl] = useState(''); const [blobUrl, setBlobUrl] = useState("");
const createBlobUrl = () => { const createBlobUrl = () => {
const blob = new Blob([code], { type: 'text/html' }); const blob = new Blob([code], { type: "text/html" });
const url = URL.createObjectURL(blob); const url = URL.createObjectURL(blob);
setBlobUrl(url); setBlobUrl(url);
}; };
@ -21,9 +21,9 @@ function Preview({ code }: Props) {
className="border-[5px] border-black rounded-[33px] p-4 shadow-lg className="border-[5px] border-black rounded-[33px] p-4 shadow-lg
transform scale-[0.8] origin-top-left w-[1280px] h-[832px]" transform scale-[0.8] origin-top-left w-[1280px] h-[832px]"
></iframe> ></iframe>
<button onClick={createBlobUrl} href={blobUrl} download="index.html"> <a onClick={createBlobUrl} href={blobUrl} download="index.html">
Download code Download code
</button> </a>
</div> </div>
); );
} }