function MainComponent() { const [word, setWord] = React.useState(""); const [definition, setDefinition] = React.useState(""); const fetchDefinition = async (e)=>{ e.preventDefault(); setDefinition("Fetching definition..."); try { const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`); const data = await response.json(); if (response.ok) { setDefinition(data[0]?.meanings[0]?.definitions[0]?.definition || "No definition found."); } else { setDefinition("Error fetching definition."); } } catch { setDefinition("Network error."); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F4F8] py-10", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white shadow-lg rounded-lg p-8 m-4", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-semibold text-center text-[#333] mb-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Dictionnaire"), /*#__PURE__*/ React.createElement("form", { onSubmit: fetchDefinition, __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "word", className: "block text-lg font-medium text-[#555] mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Word"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "word", name: "word", value: word, onChange: (e)=>setWord(e.target.value), className: "form-input mt-1 block w-full border border-gray-300 p-3 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500", placeholder: "Enter a word...", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "inline-flex items-center px-4 py-2 border border-transparent text-base font-medium rounded-md text-white bg-[#007BFF] hover:bg-[#0056b3]", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Search"))), definition && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-md font-medium text-[#333]", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Definition:"), /*#__PURE__*/ React.createElement("p", { className: "text-md text-[#555]", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, definition)))); }