function MainComponent() { const [originalText, setOriginalText] = React.useState(''); const [paraphrasedText, setParaphrasedText] = React.useState(''); const handleTextChange = (e)=>{ setOriginalText(e.target.value); }; const handleParaphrase = async (e)=>{ e.preventDefault(); const paraphrased = await fakeApiCall(originalText); setParaphrasedText(paraphrased); }; const fakeApiCall = (text)=>{ return new Promise((resolve)=>{ setTimeout(()=>resolve("The interplay between individuals and society spans the history of humanity, highlighting the mutual influence they exert. Tracing societal evolution reveals the transformative impact on personal identities across varying societal structures. Amidst the COVID-19 crisis, the implications of the virus on societal dynamics are profound."), 500); }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-[#F0F2F5] p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#121212] font-bold font-roboto mb-8", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "Paraphraser Tool"), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white shadow-md rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-4", onSubmit: handleParaphrase, __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "originalText", className: "text-lg font-roboto font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Enter Text"), /*#__PURE__*/ React.createElement("textarea", { id: "originalText", name: "originalText", rows: "4", className: "mt-2 p-4 w-full border border-[#D1D5DB] rounded-md font-roboto resize-none", placeholder: "Type your text here to paraphrase...", value: originalText, onChange: handleTextChange, __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "px-6 py-2 bg-blue-500 text-white font-medium font-roboto rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-300", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }, "Paraphrase")))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#EFF6FF] p-6", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-semibold font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Paraphrased Text"), /*#__PURE__*/ React.createElement("div", { className: `mt-4 p-4 bg-white border border-[#D1D5DB] rounded-md font-roboto ${paraphrasedText ? 'fade-in' : ''}`, __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, paraphrasedText))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; } `)); }