function MainComponent() { const [favouriteColor, setFavouriteColor] = React.useState(''); const [favouriteSpace, setFavouriteSpace] = React.useState(''); const [poem, setPoem] = React.useState(''); function handleColorChange(event) { setFavouriteColor(event.target.value); } function handleSpaceChange(event) { setFavouriteSpace(event.target.value); } function generateAndReadPoem() { const newPoem = `Ode to the ${favouriteColor} void, Stretching beyond the gaze, endlessly deploy. ${favouriteSpace}, oh vast expanse, Within your reaches, stars dance. A canvas dressed in the darkest hue, Your beauty, in my mind, ensue.`; setPoem(newPoem); const utterThis = new SpeechSynthesisUtterance(newPoem); window.speechSynthesis.speak(utterThis); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen py-2 bg-[#f7f7f7]", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Tell Us Your Favourites"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xs", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Favourite Color"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "text", value: favouriteColor, onChange: handleColorChange, name: "favouriteColor", placeholder: "Enter your favourite color", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Favourite Space"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", type: "text", value: favouriteSpace, onChange: handleSpaceChange, name: "favouriteSpace", placeholder: "Enter your favourite celestial space", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mt-6", __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: generateAndReadPoem, __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Generate Poem"))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-white shadow-md rounded text-center", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, poem)))); }