function ScreenPreviewContainer({ output, iframeRef }) { return /*#__PURE__*/ React.createElement("div", { className: "w-3/5 h-full p-4 border border-gray-800 rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black w-full h-full flex items-center justify-center rounded-lg p-4 resize overflow-hidden relative", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { ref: iframeRef, className: "w-full h-full", title: "output_frame", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), !output && /*#__PURE__*/ React.createElement("div", { className: "absolute text-white text-center", __source: { fileName: "", lineNumber: 10, columnNumber: 21 }, __self: this }, "Screen preview will appear here."))); } function ScreenPreviewContainerStory() { const iframeRef = React.createRef(); return /*#__PURE__*/ React.createElement("div", { className: "h-screen", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ScreenPreviewContainer, { iframeRef: iframeRef, output: false, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } "use client"; function MainComponent() { const [code, setCode] = useState(""); const [language, setLanguage] = useState("html"); const [output, setOutput] = useState(""); const iframeRef = React.useRef(null); const handleLanguageChange = (e)=>{ setLanguage(e.target.value); }; const handleCodeChange = (e)=>{ setCode(e.target.value); }; const handleKeyPress = (e)=>{ if (e.key === "Enter") { formatAndRenderCode(); } }; const formatAndRenderCode = ()=>{ const formattedCode = formatCode(code, language); const compiledCode = compileCode(formattedCode, language); setOutput(compiledCode); updateIframe(compiledCode); }; const updateIframe = (code)=>{ const iframe = iframeRef.current; if (iframe && iframe.contentWindow) { const doc = iframe.contentDocument || iframe.contentWindow.document; doc.open(); doc.write(code); doc.close(); } }; useEffect(()=>{ updateIframe(output); }, [ output ]); const languages = [ { value: "html", label: "HTML" }, { value: "css", label: "CSS" }, { value: "javascript", label: "JavaScript" }, { value: "react", label: "React" } ]; const formatCode = (code, language)=>{ return code; }; const compileCode = (code, language)=>{ return code; }; return /*#__PURE__*/ React.createElement("div", { className: "flex h-screen bg-[#121212] text-white", __source: { fileName: "", lineNumber: 61, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[40%] h-full p-4 flex flex-col", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex space-x-4", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, languages.map((lang)=>/*#__PURE__*/ React.createElement("button", { key: lang.value, className: `p-2 ${language === lang.value ? "bg-blue-500" : "bg-gray-300"} rounded`, onClick: ()=>setLanguage(lang.value), __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, lang.label))), /*#__PURE__*/ React.createElement("textarea", { name: "code", className: "w-full h-[60%] p-2 border border-gray-800 rounded-lg mb-4 bg-[#121212] text-white", value: code, onChange: handleCodeChange, onKeyPress: handleKeyPress, placeholder: "Paste your code here...", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("pre", { className: "w-full h-[35%] p-4 border border-gray-800 rounded-lg overflow-auto bg-[#1E1E1E]", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, code)), /*#__PURE__*/ React.createElement("div", { className: "w-[60%] h-full", __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(ScreenPreviewContainer, { iframeRef: iframeRef, output: output, __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this })); }