function MainComponent() { const [showTitle, setShowTitle] = React.useState(''); const [characters, setCharacters] = React.useState([]); const [currentCharacter, setCurrentCharacter] = React.useState(''); const handleTitleChange = (e)=>{ setShowTitle(e.target.value); }; const handleCharacterChange = (e)=>{ setCurrentCharacter(e.target.value); }; const addCharacter = ()=>{ if (currentCharacter.trim() !== '') { setCharacters([ ...characters, currentCharacter.trim() ]); setCurrentCharacter(''); } }; const generateIntro = ()=>{ // This is where you'd implement the AI generation logic alert('Generating intro for: ' + showTitle + ' with characters: ' + characters.join(', ')); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-purple-500 to-pink-500 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-xl p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-6 font-vt323 text-[#FF00FF]", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "80s Sitcom Intro Maker"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "showTitle", value: showTitle, onChange: handleTitleChange, placeholder: "Enter Show Title", className: "w-full p-2 mb-4 border border-gray-300 rounded font-press-start-2p", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "character", value: currentCharacter, onChange: handleCharacterChange, placeholder: "Add Character", className: "flex-grow p-2 border border-gray-300 rounded-l font-press-start-2p", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: addCharacter, className: "bg-blue-500 text-white px-4 rounded-r hover:bg-blue-600 font-press-start-2p", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Add")), /*#__PURE__*/ React.createElement("ul", { className: "mb-4 font-press-start-2p", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, characters.map((char, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-gray-100 p-2 mb-2 rounded", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, char))), /*#__PURE__*/ React.createElement("button", { onClick: generateIntro, className: "w-full bg-green-500 text-white p-2 rounded hover:bg-green-600 font-vt323 text-xl", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Generate Intro"))); }