function MainComponent() { const [countries, setCountries] = React.useState([ 'France', 'Spain', 'Germany', 'Italy', 'Portugal' ]); const [currentCountry, setCurrentCountry] = React.useState(''); const [isGameActive, setIsGameActive] = React.useState(false); const [currentGuess, setCurrentGuess] = React.useState(''); const [guesses, setGuesses] = React.useState([]); const handleCountryChange = (event)=>{ setCurrentCountry(event.target.value); }; const handleGuessChange = (event)=>{ setCurrentGuess(event.target.value); }; const handleCountrySubmit = (event)=>{ event.preventDefault(); if (currentCountry && !countries.includes(currentCountry)) { setCountries((currentCountries)=>[ ...currentCountries, currentCountry ]); setCurrentCountry(''); } }; const handleGuessSubmit = (event)=>{ event.preventDefault(); if (currentGuess && countries.includes(currentGuess) && !guesses.includes(currentGuess)) { setGuesses((currentGuesses)=>[ ...currentGuesses, currentGuess ]); setCurrentGuess(''); } }; const handleStartGame = ()=>{ setIsGameActive(true); setGuesses([]); }; const countryInputForm = /*#__PURE__*/ React.createElement("form", { onSubmit: handleCountrySubmit, className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "countryInput", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Add a Country:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "countryInput", name: "country", value: currentCountry, onChange: handleCountryChange, className: "border-2 border-gray-300 rounded-md p-2 text-[#121212] font-roboto", placeholder: "Enter new country", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#4caf50] text-white rounded-md p-2 font-roboto hover:bg-[#81c784]", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, "Add Country")); const startGameButton = /*#__PURE__*/ React.createElement("button", { onClick: handleStartGame, className: "bg-[#2196f3] text-white rounded-md p-2 font-roboto hover:bg-[#64b5f6]", __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }, "Start Game"); const guessForm = /*#__PURE__*/ React.createElement("form", { onSubmit: handleGuessSubmit, className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 56, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-2", __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "guessInput", className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, "Guess a Country:"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "guessInput", name: "guess", value: currentGuess, onChange: handleGuessChange, className: "border-2 border-gray-300 rounded-md p-2 text-[#121212] font-roboto", placeholder: "Enter a guess", autoComplete: "off", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#009688] text-white rounded-md p-2 font-roboto hover:bg-[#4db6ac]", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, "Guess")); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0f2f5] pt-10 flex flex-col items-center", __source: { fileName: "", lineNumber: 76, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full bg-white shadow-md rounded-md p-5", __source: { fileName: "", lineNumber: 77, columnNumber: 7 }, __self: this }, !isGameActive ? countryInputForm : guessForm, !isGameActive && startGameButton), /*#__PURE__*/ React.createElement("div", { className: "mt-10 max-w-md w-full", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "bg-white shadow-md rounded-md divide-y divide-gray-300", __source: { fileName: "", lineNumber: 82, columnNumber: 9 }, __self: this }, isGameActive ? guesses.map((guess, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, guess)) : countries.map((country, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 91, columnNumber: 15 }, __self: this }, country))))); }