function MainComponent() { const [isEditing, setIsEditing] = React.useState(false); const [zoom, setZoom] = React.useState(1); const [content, setContent] = React.useState({ section1: 'Editable content...', section2: 'Editable content...' }); React.useEffect(()=>{ const savedContent = JSON.parse(localStorage.getItem('content')); if (savedContent) { setContent(savedContent); } }, []); React.useEffect(()=>{ const debounceSave = setTimeout(()=>{ localStorage.setItem('content', JSON.stringify(content)); }, 300); return ()=>clearTimeout(debounceSave); }, [ content ]); const handleZoomIn = ()=>setZoom((prevZoom)=>Math.min(prevZoom + 0.1, 2)); const handleZoomOut = ()=>setZoom((prevZoom)=>Math.max(prevZoom - 0.1, 0.5)); const toggleEditing = ()=>setIsEditing(!isEditing); const handleContentChange = (section, value)=>{ setContent((prevContent)=>({ ...prevContent, [section]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full p-4 bg-white flex flex-col items-center justify-center font-roboto", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[600px] h-[800px] bg-[#f0f8ff] shadow-lg", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-2 border-b w-full flex justify-between items-center bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-xl font-bold text-[#007bff]", onClick: toggleEditing, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, isEditing ? 'Preview' : 'Edit'), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#007bff] text-lg mr-2", onClick: handleZoomIn, __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search-plus", __source: { fileName: "", lineNumber: 40, columnNumber: 84 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#007bff] text-lg", onClick: handleZoomOut, __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-search-minus", __source: { fileName: "", lineNumber: 41, columnNumber: 80 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "ml-4 text-lg text-[#007bff]", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-pdf", __source: { fileName: "", lineNumber: 42, columnNumber: 61 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: `p-6 overflow-auto fade-transition`, style: { transform: `scale(${zoom})`, opacity: isEditing ? 1 : 0.5 }, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-2xl text-[#333]", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Section 1"), /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded-lg bg-white", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "content-editable", contentEditable: isEditing, onBlur: (e)=>handleContentChange('section1', e.target.innerText), __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, content.section1))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold text-2xl text-[#333]", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Section 2"), /*#__PURE__*/ React.createElement("div", { className: "border p-2 rounded-lg bg-white", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "content-editable", contentEditable: isEditing, onBlur: (e)=>handleContentChange('section2', e.target.innerText), __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, content.section2))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, ` .fade-transition { transition: opacity 0.5s ease-in-out; } `)); }