function MainComponent() { const [profiles, setProfiles] = React.useState([]); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const newProfile = { id: Date.now(), name: formData.get('name'), age: formData.get('age'), medicalHistory: formData.get('medicalHistory') }; setProfiles([ ...profiles, newProfile ]); }; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen py-2 bg-[#f0f4f8]", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[400px] bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "name", __source: { fileName: "", lineNumber: 20, columnNumber: 15 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { name: "name", id: "name", type: "text", required: true, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "age", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, "Age"), /*#__PURE__*/ React.createElement("input", { name: "age", id: "age", type: "number", required: true, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "medicalHistory", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, "Medical History"), /*#__PURE__*/ React.createElement("textarea", { name: "medicalHistory", id: "medicalHistory", required: true, className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 37, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, "Submit")))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] bg-white shadow-md rounded px-8 pt-6 pb-8", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "User Profiles:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, profiles.map((profile)=>/*#__PURE__*/ React.createElement("li", { key: profile.id, className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "Name: ", profile.name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "Age: ", profile.age), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 51, columnNumber: 17 }, __self: this }, "Medical History: ", profile.medicalHistory)))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; } `)); }