function MainComponent() { const [text, setText] = React.useState(''); const [wordCount, setWordCount] = React.useState(0); const [charCount, setCharCount] = React.useState(0); const handleChange = (event)=>{ setText(event.target.value); setWordCount(event.target.value.trim().split(/\s+/).filter(Boolean).length); setCharCount(event.target.value.length); }; const toUpperCase = ()=>setText(text.toUpperCase()); const toLowerCase = ()=>setText(text.toLowerCase()); const toSentenceCase = ()=>{ setText(text.replace(/(^\s*\w|[\.\!\?]\s*\w)/g, (c)=>c.toUpperCase())); }; const toCapitalCase = ()=>{ setText(text.replace(/\w\S*/g, (word)=>word.charAt(0).toUpperCase() + word.substr(1).toLowerCase())); }; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-white", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full md:w-96", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "text", className: "w-full h-40 p-4 rounded bg-white outline outline-2 outline-[#ECF1FB] resize-none", value: text, onChange: handleChange, __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "absolute top-0 right-0 mt-2 mr-2 text-xs text-gray-500", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, "Characters: ", charCount, ", Words: ", wordCount)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between w-full md:w-96 mt-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: toUpperCase, className: "px-4 py-2 rounded bg-[#ECF1FB]", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "UPPERCASE"), /*#__PURE__*/ React.createElement("button", { onClick: toLowerCase, className: "px-4 py-2 rounded bg-[#ECF1FB]", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "lowercase"), /*#__PURE__*/ React.createElement("button", { onClick: toSentenceCase, className: "px-4 py-2 rounded bg-[#ECF1FB]", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Sentence case"), /*#__PURE__*/ React.createElement("button", { onClick: toCapitalCase, className: "px-4 py-2 rounded bg-[#ECF1FB]", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Capital Case")))); }