function MainComponent() { const [name, setName] = React.useState(''); const [amount, setAmount] = React.useState(''); const [date, setDate] = React.useState(''); const handleSubmit = (event)=>{ event.preventDefault(); console.log({ vendedor: name, monto: amount, fecha: date }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F0F2F5] p-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-2xl mb-8 text-[#333]", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, "Sistema de Pagos de Comisiones"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-[500px] bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "vendedor", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Nombre del Vendedor"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "vendedor", id: "vendedor", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "Juan Pérez", value: name, onChange: (e)=>setName(e.target.value), __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "monto", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Monto de la Venta"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "monto", id: "monto", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", placeholder: "$0.00", value: amount, onChange: (e)=>setAmount(e.target.value), __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "fecha", className: "block text-gray-700 text-sm font-bold mb-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Fecha de la Venta"), /*#__PURE__*/ React.createElement("input", { type: "date", name: "fecha", id: "fecha", className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", value: date, onChange: (e)=>setDate(e.target.value), __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#4C51BF] hover:bg-[#434190] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Registrar Pago")))); }