function MainComponent() { const [selectedPresident, setSelectedPresident] = React.useState(''); const [selectedCharacter, setSelectedCharacter] = React.useState(''); const [generatedVideoUrl, setGeneratedVideoUrl] = React.useState(''); const presidents = [ 'Washington', 'Lincoln', 'Roosevelt', 'Kennedy', 'Obama' ]; const characters = [ 'True', 'Bartleby', 'Zee', 'Grizelda', 'Rainbow King' ]; const handleGenerate = ()=>{ if (selectedPresident && selectedCharacter) { setGeneratedVideoUrl(`https://example.com/video/${selectedPresident}_${selectedCharacter}.mp4`); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-r from-blue-400 to-purple-500 flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-white mb-8 font-roboto", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "AI Presidents & True and the Rainbow Kingdom Video Generator"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "president", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Select a President:"), /*#__PURE__*/ React.createElement("select", { id: "president", name: "president", className: "w-full px-3 py-2 border rounded-md", value: selectedPresident, onChange: (e)=>setSelectedPresident(e.target.value), __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Choose a President"), presidents.map((president)=>/*#__PURE__*/ React.createElement("option", { key: president, value: president, __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, president)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2 font-roboto", htmlFor: "character", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Select a Character:"), /*#__PURE__*/ React.createElement("select", { id: "character", name: "character", className: "w-full px-3 py-2 border rounded-md", value: selectedCharacter, onChange: (e)=>setSelectedCharacter(e.target.value), __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, "Choose a Character"), characters.map((character)=>/*#__PURE__*/ React.createElement("option", { key: character, value: character, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, character)))), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", onClick: handleGenerate, __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "Generate Video"), generatedVideoUrl && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, "Generated Video:"), /*#__PURE__*/ React.createElement("video", { className: "w-full rounded-md", controls: true, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: generatedVideoUrl, type: "video/mp4", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }), "Your browser does not support the video tag.")))); }