function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [theme, setTheme] = React.useState(''); const [characters, setCharacters] = React.useState([]); const [mainCharacter, setMainCharacter] = React.useState(''); const [storyLength, setStoryLength] = React.useState('medium'); const [voice, setVoice] = React.useState(''); const [audio, setAudio] = React.useState(null); const [surprise, setSurprise] = React.useState(null); const handleGenerateStory = ()=>{}; const handleVoiceRecord = ()=>{}; const addTaskOrPuzzle = ()=>{}; const addSurprise = ()=>{}; const voiceModification = (voiceType)=>{ setVoice(voiceType); }; const onChangeHandler = (e)=>{ const { name, value } = e.target; if (name === 'prompt') { setPrompt(value); } else if (name === 'theme') { setTheme(value); } else if (name === 'mainCharacter') { setMainCharacter(value); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center font-crimson-text bg-[#f0f0f0] h-screen p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-2 w-[100px] h-[100px] bg-[#fffae6] rounded-full flex items-center justify-center", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/ai-assistant.png", alt: "AI Assistant Character", className: "w-[80px] h-[80px]", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex flex-col ml-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Enter your story prompt or select a theme:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", value: prompt, onChange: onChangeHandler, className: "p-2 border border-[#ccc] rounded-md", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "theme", value: theme, placeholder: "Select a theme", onChange: onChangeHandler, className: "p-2 border border-[#ccc] rounded-md mt-2", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateStory, className: "mt-4 bg-[#ff8a5c] text-white p-2 rounded-md", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, "Generate Story"))), /*#__PURE__*/ React.createElement("textarea", { className: "p-2 w-full h-[300px] border border-[#ccc] rounded-md", placeholder: "Your story will appear here...", __source: { fileName: "", lineNumber: 65, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center my-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#6c63ff] text-white p-2 rounded-md", onClick: handleVoiceRecord, __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Listen to Story"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-[200px]", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, "Choose Story Features:"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ff8a5c] text-white p-2 rounded-md mb-2", onClick: addTaskOrPuzzle, __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, "Add Task/Puzzle"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ff8a5c] text-white p-2 rounded-md", onClick: addSurprise, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, "Surprise Me!"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center w-full mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, "Make yourself the main character:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "mainCharacter", value: mainCharacter, placeholder: "Your Name", onChange: onChangeHandler, className: "p-2 border border-[#ccc] rounded-md ml-2", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center w-full mb-4", __source: { fileName: "", lineNumber: 103, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 104, columnNumber: 9 }, __self: this }, "Story Length:"), /*#__PURE__*/ React.createElement("select", { value: storyLength, onChange: (e)=>setStoryLength(e.target.value), className: "p-2 border border-[#ccc] rounded-md ml-2", __source: { fileName: "", lineNumber: 105, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "short", __source: { fileName: "", lineNumber: 109, columnNumber: 11 }, __self: this }, "Short"), /*#__PURE__*/ React.createElement("option", { value: "medium", __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, "Medium"), /*#__PURE__*/ React.createElement("option", { value: "long", __source: { fileName: "", lineNumber: 111, columnNumber: 11 }, __self: this }, "Long"))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center items-center w-full mb-4", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, "Choose a voice:"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 ml-2", __source: { fileName: "", lineNumber: 117, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#ff8a5c] text-white p-2 rounded-md", onClick: ()=>voiceModification('male'), __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "Male"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ff8a5c] text-white p-2 rounded-md", onClick: ()=>voiceModification('female'), __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "Female"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ff8a5c] text-white p-2 rounded-md", onClick: ()=>voiceModification('robotic'), __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, "Robotic"))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 flex-col w-full mb-4", __source: { fileName: "", lineNumber: 136, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 137, columnNumber: 9 }, __self: this }, "Upload or Draw Images:"), /*#__PURE__*/ React.createElement("input", { type: "file", className: "mb-2", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#ff8a5c] text-white p-2 rounded-md", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, "Drawing Tool")), /*#__PURE__*/ React.createElement("button", { className: "bg-[#6c63ff] text-white p-2 rounded-md", __source: { fileName: "", lineNumber: 148, columnNumber: 7 }, __self: this }, "Save and Share"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 152, columnNumber: 7 }, __self: this }, ` @keyframes aiAssistantAnim { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes assistantDance { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } img { animation: aiAssistantAnim 2s infinite, assistantDance 0.5s infinite; } `)); }