function MainComponent() { const [story, setStory] = React.useState(""); const [loading, setLoading] = React.useState(false); const generateStory = async (event)=>{ event.preventDefault(); setLoading(true); const theme = event.target.theme.value; const characters = event.target.characters.value.split(","); const setting = event.target.setting.value; try { const storyResponse = await fetch(`https://api.example.com/generateStory?theme=${theme}&characters=${encodeURIComponent(characters.join(","))}&setting=${setting}`); if (!storyResponse.ok) { throw new Error('Failed to fetch story'); } const storyData = await storyResponse.json(); setStory(storyData.story); } catch (error) { setStory("Sorry, we could not generate a story at this time. Please try again later."); } setLoading(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#F4F7F6] flex items-center justify-center", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-white shadow-lg rounded-lg p-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto text-center mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "AI Story Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: generateStory, __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "theme", className: "block text-sm font-medium font-roboto text-gray-700", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Theme"), /*#__PURE__*/ React.createElement("input", { name: "theme", type: "text", className: "mt-1 p-2 w-full border rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "characters", className: "block text-sm font-medium font-roboto text-gray-700", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Characters"), /*#__PURE__*/ React.createElement("input", { name: "characters", type: "text", className: "mt-1 p-2 w-full border rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "setting", className: "block text-sm font-medium font-roboto text-gray-700", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Setting"), /*#__PURE__*/ React.createElement("input", { name: "setting", type: "text", className: "mt-1 p-2 w-full border rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium font-roboto text-white bg-[#4F46E5] hover:bg-[#4338CA] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500", disabled: loading, __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, loading ? 'Generating...' : 'Generate Story')), story && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-indigo-100 rounded-md", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-gray-700", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, story)))); }