function MainComponent() { const [words, setWords] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const [isValidInput, setIsValidInput] = React.useState(true); const handleInputChange = (event)=>{ setInputValue(event.target.value); setIsValidInput(event.target.value.trim().length >= 2 && event.target.value.trim().length <= 10); }; const handleSubmit = (event)=>{ event.preventDefault(); if (isValidInput) { setWords((prevWords)=>[ ...prevWords, { user: "User", word: inputValue.trim() } ]); setInputValue(''); } }; const buttonDisabled = !(isValidInput && inputValue.length); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#ECFDF5] flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "mb-10 p-6 text-center bg-white w-full shadow-md", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold font-roboto text-[#064E3B] mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, "Words in Chain"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#064E3B]", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Boost your team or family spirit by creating collaborative sentences."), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mt-4", __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#0D9488] text-white py-2 px-4 rounded-md font-roboto mx-1 hover:bg-[#0F766E]", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, "Sign up"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0D9488] text-white py-2 px-4 rounded-md font-roboto mx-1 hover:bg-[#0F766E]", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, "Log in"))), /*#__PURE__*/ React.createElement("main", { className: "mb-auto p-6 w-full max-w-3xl", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex justify-between items-center mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "word", className: `flex-grow p-2 border ${isValidInput ? 'border-gray-300' : 'border-red-500'} rounded-md font-roboto mr-2`, placeholder: "Enter a word...", autoComplete: "off", value: inputValue, onChange: handleInputChange, __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: `px-6 py-2 border bg-[#0D9488] text-white rounded-md font-roboto ${buttonDisabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-[#0F766E]'}`, disabled: buttonDisabled, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Add Word")), !isValidInput && /*#__PURE__*/ React.createElement("p", { className: "text-red-500 text-sm mb-4 font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Words must be 2 to 10 characters long."), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0FFF4] p-4 rounded-md shadow-inner", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#065F46] mb-2", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Sentence so far:"), words.map((entry, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "inline-block bg-[#34D399] text-white rounded-full px-3 py-1 text-sm font-semibold mr-1", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, entry.word)))), /*#__PURE__*/ React.createElement("footer", { className: "py-4 bg-white w-full shadow-inner text-center", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 61, columnNumber: 9 }, __self: this }, "Only the project creator can finalize the sentence."))); }