function MainComponent() { const [theme, setTheme] = React.useState('modern'); const [backgroundColor, setBackgroundColor] = React.useState('pink'); const [subject, setSubject] = React.useState(''); const [characterDescription, setCharacterDescription] = React.useState(''); const [artStyle, setArtStyle] = React.useState(''); const [bookLength, setBookLength] = React.useState(1); const [writingStyle, setWritingStyle] = React.useState(''); const [textToSpeechVoice, setTextToSpeechVoice] = React.useState('child'); const handleThemeToggle = ()=>setTheme(theme === 'modern' ? 'minimalist' : 'modern'); const handleBackgroundColorChange = (color)=>setBackgroundColor(color); const styleButton = /*#__PURE__*/ React.createElement("button", { className: `my-1 px-4 py-2 rounded-full shadow-md font-crimson-text ${theme === 'modern' ? 'bg-[#E4E4E4] text-[#333333]' : 'bg-[#F9F9F9] text-[#111111]'}`, onClick: handleThemeToggle, __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, "Toggle Style"); const backgroundColorPicker = /*#__PURE__*/ React.createElement("div", { className: "flex my-1 space-x-2", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, [ 'pink', 'blue', 'yellow' ].map((color)=>/*#__PURE__*/ React.createElement("button", { key: color, className: `h-8 w-8 rounded-full bg-${color}-300`, onClick: ()=>handleBackgroundColorChange(color), __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }))); const title = /*#__PURE__*/ React.createElement("h1", { className: `text-5xl font-bold mt-10 mb-6 text-center ${theme === 'modern' ? 'font-lobster' : 'font-crimson-text'}`, __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, "Readzy"); const formsForBookCreation = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center my-6", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "subject", className: "mb-4 px-4 py-2 rounded-lg shadow-md font-crimson-text bg-white", onChange: (e)=>setSubject(e.target.value), __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, [ ...Array.from({ length: 15 }) ].map((_, idx)=>/*#__PURE__*/ React.createElement("option", { key: idx, value: `Subject ${idx + 1}`, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, `Subject ${idx + 1}`)), /*#__PURE__*/ React.createElement("option", { value: "custom", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Custom Subject")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "characterDescription", placeholder: "Character Description", className: "mb-4 px-4 py-2 rounded-lg shadow-md font-crimson-text bg-white", onChange: (e)=>setCharacterDescription(e.target.value), __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "artStyle", className: "mb-4 px-4 py-2 rounded-lg shadow-md font-crimson-text bg-white", onChange: (e)=>setArtStyle(e.target.value), __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "custom", __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, "Custom Style")), /*#__PURE__*/ React.createElement("input", { type: "range", name: "bookLength", min: "1", max: "30", value: bookLength, className: "mb-4", onChange: (e)=>setBookLength(e.target.value), __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "writingStyle", className: "mb-4 px-4 py-2 rounded-lg shadow-md font-crimson-text bg-white", onChange: (e)=>setWritingStyle(e.target.value), __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this })); const actionButtons = /*#__PURE__*/ React.createElement("div", { className: "flex justify-center my-6 space-x-6", __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-6 py-3 rounded-lg shadow-md font-crimson-text bg-blue-600 text-white", __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, "Write My Book"), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-3 rounded-lg shadow-md font-crimson-text bg-yellow-600 text-white", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, "Illustrate My Book")); const displaySection = /*#__PURE__*/ React.createElement("div", { className: "my-6", __source: { fileName: "", lineNumber: 105, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-start", __source: { fileName: "", lineNumber: 106, columnNumber: 7 }, __self: this })); const finalizationOptions = /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center my-6", __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "textToSpeechVoice", className: "mb-4 px-4 py-2 rounded-lg shadow-md font-crimson-text bg-white", onChange: (e)=>setTextToSpeechVoice(e.target.value), __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "child", __source: { fileName: "", lineNumber: 119, columnNumber: 9 }, __self: this }, "Child's Voice"), /*#__PURE__*/ React.createElement("option", { value: "mother", __source: { fileName: "", lineNumber: 120, columnNumber: 9 }, __self: this }, "Mother's Voice")), /*#__PURE__*/ React.createElement("button", { className: "px-6 py-3 rounded-lg shadow-md font-crimson-text bg-green-600 text-white", __source: { fileName: "", lineNumber: 122, columnNumber: 7 }, __self: this }, "Save and Download")); const futureStorySuggestions = /*#__PURE__*/ React.createElement("div", { className: "flex justify-center my-6", __source: { fileName: "", lineNumber: 129, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-6 py-3 rounded-lg shadow-md font-crimson-text bg-purple-600 text-white", __source: { fileName: "", lineNumber: 130, columnNumber: 7 }, __self: this }, "Generate Titles")); const designButtons = /*#__PURE__*/ React.createElement("div", { className: "absolute top-4 right-4 space-y-1", __source: { fileName: "", lineNumber: 137, columnNumber: 5 }, __self: this }, backgroundColorPicker, styleButton); const responsiveClass = `min-h-screen p-10 bg-${backgroundColor}-200`; return /*#__PURE__*/ React.createElement("div", { className: responsiveClass, __source: { fileName: "", lineNumber: 146, columnNumber: 5 }, __self: this }, designButtons, title, formsForBookCreation, actionButtons, displaySection, finalizationOptions, futureStorySuggestions); }