function MainComponent() { const [name, setName] = React.useState(''); const [email, setEmail] = React.useState(''); const [phone, setPhone] = React.useState(''); const [about, setAbout] = React.useState(''); const [experience, setExperience] = React.useState(''); const [education, setEducation] = React.useState(''); const [skills, setSkills] = React.useState(''); const [language, setLanguage] = React.useState('en'); const [isLoading, setIsLoading] = React.useState(false); const [cvText, setCvText] = React.useState(''); const handleSubmit = async (event)=>{ event.preventDefault(); setIsLoading(true); try { // Fetch and translation logic } catch (error) { console.error('Error building the CV', error); } setIsLoading(false); }; let loadingIndicator = null; if (isLoading) { loadingIndicator = /*#__PURE__*/ React.createElement("div", { className: "w-full text-center", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Loading...")); } let cvDisplay = null; if (cvText) { cvDisplay = /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 border-t border-gray-300", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-4", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Generated CV (Translated to ", language, "):"), /*#__PURE__*/ React.createElement("p", { className: "whitespace-pre-wrap", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, cvText)); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-10", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-lg", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap -mx-3 mb-6", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full px-3", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2", htmlFor: "language", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Language"), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 48, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "block w-full bg-white border border-gray-200 text-gray-700 py-3 px-4 pr-8 round leading-tight focus:outline-none focus:bg-white focus:border-gray-500", id: "language", name: "language", value: language, onChange: (e)=>setLanguage(e.target.value), __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "en", className: "flex items-center", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-flag-usa mr-2", __source: { fileName: "", lineNumber: 50, columnNumber: 66 }, __self: this }), "English"), /*#__PURE__*/ React.createElement("option", { value: "es", className: "flex items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-flag-spain mr-2", __source: { fileName: "", lineNumber: 51, columnNumber: 66 }, __self: this }), "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "fr", className: "flex items-center", __source: { fileName: "", lineNumber: 52, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-flag-france mr-2", __source: { fileName: "", lineNumber: 52, columnNumber: 66 }, __self: this }), "French"), /*#__PURE__*/ React.createElement("option", { value: "de", className: "flex items-center", __source: { fileName: "", lineNumber: 53, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-flag-germany mr-2", __source: { fileName: "", lineNumber: 53, columnNumber: 66 }, __self: this }), "German"), /*#__PURE__*/ React.createElement("option", { value: "it", className: "flex items-center", __source: { fileName: "", lineNumber: 54, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-flag-italy mr-2", __source: { fileName: "", lineNumber: 54, columnNumber: 66 }, __self: this }), "Italian"), /*#__PURE__*/ React.createElement("option", { value: "jp", className: "flex items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-flag-japan mr-2", __source: { fileName: "", lineNumber: 55, columnNumber: 66 }, __self: this }), "Japanese")), /*#__PURE__*/ React.createElement("div", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down", __source: { fileName: "", lineNumber: 58, columnNumber: 17 }, __self: this })))))), loadingIndicator, cvDisplay); }