function MainComponent() { const [profiles, setProfiles] = React.useState([]); const [name, setName] = React.useState(''); const [age, setAge] = React.useState(''); const [city, setCity] = React.useState(''); const [country, setCountry] = React.useState(''); const [interest, setInterest] = React.useState(''); const [alerts, setAlerts] = React.useState([]); const interestsOptions = [ 'Reading', 'Cooking', 'Traveling', 'Sports', 'Music' ]; const handleSubmit = ()=>{ const newProfile = { name, age, city, country, interest }; setProfiles([ ...profiles, newProfile ]); checkForAlerts(newProfile, [ ...profiles, newProfile ]); }; const checkForAlerts = (newProfile, allProfiles)=>{ allProfiles.forEach((profile)=>{ if (profile.name !== newProfile.name && profile.city === newProfile.city && profile.interest === newProfile.interest) { setAlerts([ ...alerts, `Alert: ${profile.name} and ${newProfile.name} are in the same city (${profile.city}) and share the same interest (${profile.interest})` ]); } }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, "Profile Creator"), /*#__PURE__*/ React.createElement("div", { className: "my-4", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", className: "border mb-2 p-2 w-full", placeholder: "Name", value: name, onChange: (e)=>setName(e.target.value), name: "name", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "number", className: "border mb-2 p-2 w-full", placeholder: "Age", value: age, onChange: (e)=>setAge(e.target.value), name: "age", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border mb-2 p-2 w-full", placeholder: "City", value: city, onChange: (e)=>setCity(e.target.value), name: "city", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", className: "border mb-2 p-2 w-full", placeholder: "Country", value: country, onChange: (e)=>setCountry(e.target.value), name: "country", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { className: "border mb-2 p-2 w-full", value: interest, onChange: (e)=>setInterest(e.target.value), name: "interest", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", disabled: true, __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "Select Interest"), interestsOptions.map((opt)=>/*#__PURE__*/ React.createElement("option", { key: opt, value: opt, __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, opt))), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white p-2 w-full", onClick: handleSubmit, __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Create Profile")), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 7 }, __self: this }, "Profiles"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, profiles.map((profile, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-2 my-2", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 85, columnNumber: 13 }, __self: this }, "Name: ", profile.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Age: ", profile.age), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "City: ", profile.city), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Country: ", profile.country), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 89, columnNumber: 13 }, __self: this }, "Interest: ", profile.interest)))), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, "Alerts"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, alerts.map((alert, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "border p-2 my-2 bg-red-200", __source: { fileName: "", lineNumber: 97, columnNumber: 11 }, __self: this }, alert)))); }