function MainComponent() { const [generatedCard, setGeneratedCard] = React.useState({ recipientName: '', senderName: '', message: '', greeting: '', closing: '' }); const handleChange = (e)=>{ setGeneratedCard({ ...generatedCard, [e.target.name]: e.target.value }); }; const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f8f8f8] p-4 gap-6", __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#1A202C] p-5", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl font-bold text-center text-white font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Custom Gift Card")), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "p-5", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "recipientName", className: "block mb-2 text-sm font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, "Recipient's Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "recipientName", id: "recipientName", value: generatedCard.recipientName, onChange: handleChange, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "Jane Doe", required: true, __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "greeting", className: "block mb-2 text-sm font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Greeting"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "greeting", id: "greeting", value: generatedCard.greeting, onChange: handleChange, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "Happy Birthday!", required: true, __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block mb-2 text-sm font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Personal Message"), /*#__PURE__*/ React.createElement("textarea", { name: "message", id: "message", rows: "4", value: generatedCard.message, onChange: handleChange, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "Thank you for being an amazing friend. Enjoy your gift!", required: true, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "closing", className: "block mb-2 text-sm font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, "Closing"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "closing", id: "closing", value: generatedCard.closing, onChange: handleChange, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "Best wishes,", required: true, __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-5", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "senderName", className: "block mb-2 text-sm font-medium text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Sender's Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "senderName", id: "senderName", value: generatedCard.senderName, onChange: handleChange, className: "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5", placeholder: "John Doe", required: true, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "text-white bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Generate Card")))); }