function MainComponent() { const [subject, setSubject] = React.useState(''); const [characterDescription, setCharacterDescription] = React.useState(''); const [artStyle, setArtStyle] = React.useState(''); const [lengthOfBook, setLengthOfBook] = React.useState(20); const [writingStyle, setWritingStyle] = React.useState(''); const [storyDescription, setStoryDescription] = React.useState(''); const [background, setBackground] = React.useState('bg-pink-300'); const [isTranscribing, setIsTranscribing] = React.useState(false); const [isGeneratingBook, setIsGeneratingBook] = React.useState(false); const [bookText, setBookText] = React.useState([]); const [bookImages, setBookImages] = React.useState([]); const [audioFile, setAudioFile] = React.useState(null); const handleSubjectChange = (event)=>{ event.preventDefault(); setSubject(event.target.value); }; const handleAddCharacter = ()=>{}; const handleArtStyleChange = (event)=>setArtStyle(event.target.value); const handleWriteMyBook = ()=>{ setIsGeneratingBook(true); }; const handleDictateStory = ()=>{ setIsTranscribing(true); }; const handleChangeBackground = (color)=>{ setBackground(`bg-[${color}]`); }; const handleIllustrateMyBook = ()=>{}; const handleSaveAndDownload = ()=>{}; const handleGenerateTitles = ()=>{}; let subjectOptions = Array.from({ length: 15 }).fill(null).map((_, index)=>/*#__PURE__*/ React.createElement("option", { key: `subject-${index + 1}`, __source: { fileName: "", lineNumber: 43, columnNumber: 5 }, __self: this }, `Subject ${index + 1}`)); const backgroundColorButtons = /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 justify-center", __source: { fileName: "", lineNumber: 47, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleChangeBackground('#ff61a6'), className: "rounded-full w-8 h-8 bg-pink-300", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleChangeBackground('#61a6ff'), className: "rounded-full w-8 h-8 bg-blue-300", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleChangeBackground('#fae042'), className: "rounded-full w-8 h-8 bg-yellow-300", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this })); const writingStylesButtons = /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setWritingStyle('narrative'), className: "px-4 py-2 bg-green-200 rounded", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "Narrative"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setWritingStyle('descriptive'), className: "px-4 py-2 bg-green-200 rounded", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, "Descriptive"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setWritingStyle('expository'), className: "px-4 py-2 bg-green-200 rounded", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, "Expository"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setWritingStyle('persuasive'), className: "px-4 py-2 bg-green-200 rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, "Persuasive")); return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen p-10 text-center ${background}`, __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-8xl text-[#fae042] font-[disney]", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }, "Readzy"), /*#__PURE__*/ React.createElement("h2", { className: "text-6xl text-white font-bold my-4", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "Create your own book!"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-4 justify-center items-center my-6", __source: { fileName: "", lineNumber: 68, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-gray-300 text-black rounded px-4 py-2", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, "Modern"), /*#__PURE__*/ React.createElement("button", { className: "bg-white text-black rounded px-4 py-2", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Minimalist")), backgroundColorButtons, /*#__PURE__*/ React.createElement("form", { className: "bg-white p-6 rounded-lg shadow-lg grid gap-6", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "subject", value: subject, onChange: handleSubjectChange, className: "p-3 border-2 border-gray-300 rounded text-lg", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, subjectOptions), /*#__PURE__*/ React.createElement("button", { className: "bg-orange-200 rounded px-4 py-2", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "Custom Subject"), /*#__PURE__*/ React.createElement("textarea", { name: "character_description", value: characterDescription, onChange: (e)=>setCharacterDescription(e.target.value), placeholder: "Character Description", className: "p-3 border-2 border-gray-300 rounded h-24 text-lg", __source: { fileName: "", lineNumber: 87, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddCharacter, className: "bg-orange-200 rounded px-4 py-2", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, "Add Character"), /*#__PURE__*/ React.createElement("select", { name: "art_style", value: artStyle, onChange: handleArtStyleChange, className: "p-3 border-2 border-gray-300 rounded text-lg", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-orange-200 rounded px-4 py-2", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "Custom Style"), /*#__PURE__*/ React.createElement("input", { type: "range", min: "1", max: "100", value: lengthOfBook, onChange: (e)=>setLengthOfBook(e.target.value), className: "slider", __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }), writingStylesButtons, /*#__PURE__*/ React.createElement("textarea", { name: "story_description", value: storyDescription, onChange: (e)=>setStoryDescription(e.target.value), placeholder: "Story Description", className: "p-3 border-2 border-gray-300 rounded h-48 text-lg", __source: { fileName: "", lineNumber: 112, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleDictateStory, className: "bg-blue-500 text-white rounded p-3 w-auto", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, "Dictate Story"), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleWriteMyBook, className: "mx-auto px-10 py-3 bg-pink-600 text-white rounded-lg text-2xl font-bold", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, "Write My Book"), /*#__PURE__*/ React.createElement("button", { onClick: handleIllustrateMyBook, className: "mx-auto px-10 py-3 bg-yellow-500 text-white rounded-lg text-2xl font-bold", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }, "Illustrate My Book")), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 justify-center items-center my-6", __source: { fileName: "", lineNumber: 133, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-200 rounded", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "Child Voice"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-200 rounded", __source: { fileName: "", lineNumber: 135, columnNumber: 9 }, __self: this }, "Mother Voice")), /*#__PURE__*/ React.createElement("button", { onClick: handleSaveAndDownload, className: "bg-green-500 text-white rounded p-3 text-lg hover:bg-green-600 transition-colors duration-300 ease-in-out", __source: { fileName: "", lineNumber: 138, columnNumber: 7 }, __self: this }, "Save and Download"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 justify-center items-center mt-6", __source: { fileName: "", lineNumber: 142, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-indigo-200 rounded", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, "Responsive On"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-indigo-200 rounded", __source: { fileName: "", lineNumber: 144, columnNumber: 9 }, __self: this }, "Responsive Off")), /*#__PURE__*/ React.createElement("button", { className: "bg-red-200 rounded px-4 py-2 mt-6", __source: { fileName: "", lineNumber: 147, columnNumber: 7 }, __self: this }, "Rearrange Pages"), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateTitles, className: "bg-purple-200 rounded px-4 py-2 mt-6", __source: { fileName: "", lineNumber: 149, columnNumber: 7 }, __self: this }, "Generate Titles")); }