function MainComponent() { const [name, setName] = React.useState(''); const [position, setPosition] = React.useState(''); const [company, setCompany] = React.useState(''); const [email, setEmail] = React.useState(''); const [phone, setPhone] = React.useState(''); const [address, setAddress] = React.useState(''); const [submitted, setSubmitted] = React.useState(false); const handleInputChange = (event)=>{ const { name, value } = event.target; switch(name){ case 'name': setName(value); break; case 'position': setPosition(value); break; case 'company': setCompany(value); break; case 'email': setEmail(value); break; case 'phone': setPhone(value); break; case 'address': setAddress(value); break; } }; const handleSubmit = (event)=>{ event.preventDefault(); setSubmitted(true); }; const resetForm = ()=>{ setName(''); setPosition(''); setCompany(''); setEmail(''); setPhone(''); setAddress(''); setSubmitted(false); }; const GeneratedCard = ()=>/*#__PURE__*/ React.createElement("div", { className: "w-80 bg-white p-5 shadow-lg rounded-md", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "images/company-logo.png", alt: "Company Logo", className: "w-32 h-32", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#121212] text-xl mt-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, name), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, position, " at ", company), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, email), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, phone), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, address))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen bg-[#F3F4F6]", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-lg p-8 bg-white shadow-lg rounded-md", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, !submitted ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("h2", { className: "text-center text-2xl font-semibold font-roboto text-[#121212] mb-6", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "Business Card Generator"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-4", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#1F2937] text-white font-roboto rounded px-4 py-2 hover:bg-[#4B5563] transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this }, "Generate Card"))) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(GeneratedCard, { __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: resetForm, className: "w-full mt-4 bg-red-600 text-white font-roboto rounded px-4 py-2 hover:bg-red-700 transition duration-300 ease-in-out", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Reset Form"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; } `)); }