function MainComponent() { const [selectedWritingStyle, setSelectedWritingStyle] = React.useState(null); const [writingStylesDetails, setWritingStylesDetails] = React.useState({}); const [currentTheme, setCurrentTheme] = React.useState('modern'); const [backgroundColor, setBackgroundColor] = React.useState('bg-[#ffd700]'); // Default: yellow const writingStyles = [ { title: 'Interactive Play: Engage and Discover', detail: 'Often non-rhyming but highly engaging, focusing on sensory exploration and discovery.' }, { title: 'Repetitive and Rhythmic: Learning Through Repetition', detail: 'May include simple rhymes or repeated refrains that toddlers can anticipate and join in on.' } ]; const selectWritingStyle = (style)=>{ setSelectedWritingStyle(style.title); setWritingStylesDetails({ ...writingStylesDetails, [style.title]: !writingStylesDetails[style.title] }); }; const changeBackgroundColor = (color)=>{ setBackgroundColor(color); }; const toggleTheme = ()=>{ setCurrentTheme(currentTheme === 'modern' ? 'minimalist' : 'modern'); }; return /*#__PURE__*/ React.createElement("div", { className: `min-h-screen flex flex-col font-roboto ${backgroundColor}`, __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "flex justify-between items-center p-5 bg-white shadow-md", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-[Waltograph] text-[#5651e5]", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Readzy"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { "aria-label": "Pink Background", className: "w-8 h-8 rounded-full bg-[#ff69b4]", onClick: ()=>changeBackgroundColor('bg-[#ff69b4]'), __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { "aria-label": "Blue Background", className: "w-8 h-8 rounded-full bg-[#1e90ff]", onClick: ()=>changeBackgroundColor('bg-[#1e90ff]'), __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { "aria-label": "Yellow Background", className: "w-8 h-8 rounded-full bg-[#ffd700]", onClick: ()=>changeBackgroundColor('bg-[#ffd700]'), __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-1", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { "aria-label": "Modern Theme", className: `px-4 py-2 rounded text-sm font-semibold ${currentTheme === 'modern' ? 'bg-gray-700 text-white' : 'bg-gray-200 text-gray-700'}`, onClick: toggleTheme, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "Modern"), /*#__PURE__*/ React.createElement("button", { "aria-label": "Minimalist Theme", className: `px-4 py-2 rounded text-sm font-semibold ${currentTheme === 'minimalist' ? 'bg-gray-700 text-white' : 'bg-gray-200 text-gray-700'}`, onClick: toggleTheme, __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "Minimalist")))), /*#__PURE__*/ React.createElement("main", { className: "flex-grow", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-10", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-5xl font-['ChatGPT'] text-[#4a4e69] mb-10", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Create your own book!"), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto p-6 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "space-y-6", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "subject", className: "w-full p-3 border border-gray-300 rounded text-gray-700", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, [ ...Array.from({ length: 15 }) ].map((_, i)=>/*#__PURE__*/ React.createElement("option", { key: i, __source: { fileName: "", lineNumber: 54, columnNumber: 62 }, __self: this }, "Subject ", i + 1)), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, "Custom Subject")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "character", className: "w-full p-3 border border-gray-300 rounded text-gray-700", placeholder: "Character Description", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "artStyle", className: "w-full p-3 border border-gray-300 rounded text-gray-700", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 59, columnNumber: 17 }, __self: this }, "Select Art Style"), /*#__PURE__*/ React.createElement("option", { __source: { fileName: "", lineNumber: 60, columnNumber: 17 }, __self: this }, "Custom Style")), /*#__PURE__*/ React.createElement("input", { type: "range", name: "bookLength", className: "w-full", min: "1", max: "30", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "space-y-1", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }, writingStyles.map((style)=>/*#__PURE__*/ React.createElement("div", { key: style.title, className: "flex flex-col", __source: { fileName: "", lineNumber: 65, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: ()=>selectWritingStyle(style), className: `flex items-center justify-between w-full text-left rounded px-4 py-2 text-gray-700 ${selectedWritingStyle === style.title ? 'bg-blue-100' : 'bg-gray-100'}`, __source: { fileName: "", lineNumber: 66, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 67, columnNumber: 23 }, __self: this }, style.title), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 68, columnNumber: 23 }, __self: this }, writingStylesDetails[style.title] ? '🔼' : '🔽')), writingStylesDetails[style.title] && /*#__PURE__*/ React.createElement("p", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 70, columnNumber: 59 }, __self: this }, style.detail)))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#1e90ff] text-white px-6 py-2 rounded shadow", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, "Write My Book"), /*#__PURE__*/ React.createElement("button", { type: "button", className: "w-full bg-[#ff69b4] text-white px-6 py-2 rounded shadow", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "Illustrate My Book"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-200 p-4 text-center", __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-purple-600 text-white px-6 py-2 rounded shadow", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, "Generate Titles"))); }