function MainComponent() { const [codeBlocks, setCodeBlocks] = React.useState([ { id: 1, language: 'javascript' } ]); const iframeRef = React.createRef(); const addCodeBlock = ()=>{ setCodeBlocks([ ...codeBlocks, { id: codeBlocks.length + 1, language: 'javascript' } ]); }; const removeCodeBlock = ()=>{ setCodeBlocks(codeBlocks.slice(0, -1)); }; const changeLanguage = (id, language)=>{ setCodeBlocks(codeBlocks.map((block)=>block.id === id ? { ...block, language } : block)); }; const langOptions = [ { value: 'javascript', label: 'JavaScript' }, { value: 'python', label: 'Python' }, { value: 'java', label: 'Java' }, { value: 'csharp', label: 'C#' } ]; const codeBlockColumns = `grid-cols-${codeBlocks.length}`; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen flex p-4 bg-gray-900", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `grid ${codeBlockColumns} gap-4 w-3/5`, __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, codeBlocks.map((block)=>/*#__PURE__*/ React.createElement("div", { key: block.id, className: "relative bg-black border border-gray-700 shadow-lg rounded-md h-full p-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "absolute -top-3 left-2 text-xs bg-gray-700 text-white py-1 px-2 rounded-md", value: block.language, onChange: (e)=>changeLanguage(block.id, e.target.value), name: `language-${block.id}`, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, langOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 38, columnNumber: 17 }, __self: this }, option.label))), /*#__PURE__*/ React.createElement("textarea", { className: `w-full h-full bg-black text-white p-2 resize-none`, name: `code-${block.id}`, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-2", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-gray-400 hover:text-white mr-2", onClick: addCodeBlock, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-plus", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-gray-400 hover:text-white", onClick: removeCodeBlock, __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-minus", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement(React.Fragment, null)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this })); }