function MainComponent() { const [name, setName] = React.useState(''); const [address, setAddress] = React.useState('ciruelo 1212 portal del norte'); const [theme, setTheme] = React.useState('Fútbol y Videojuegos'); const handleNameChange = (e)=>{ setName(e.target.value); }; const handleThemeChange = (e)=>{ setTheme(e.target.value); }; const handleAddressChange = (e)=>{ setAddress(e.target.value); }; const handleSubmit = (e)=>{ e.preventDefault(); alert(`¡Invitación creada!\nNombre: ${name}\nTemática: ${theme}\nDirección: ${address}\nHorario: 3 pm`); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center w-full min-h-screen bg-[#f3f4f6]", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#FFFFFF] shadow-lg rounded-lg p-8 w-full max-w-md", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-crimson-text text-[#1f2937] text-3xl mb-4 text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Invitación para Santiago Chapa"), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-[#374151] text-xl mb-1", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "Temática: ", theme), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-[#374151] text-lg mb-4", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Fútbol y Videojuegos"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "border p-2 rounded-lg font-roboto", type: "text", placeholder: "Nombre del invitado", onChange: handleNameChange, value: name, name: "name", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { className: "border p-2 rounded-lg font-roboto", type: "text", placeholder: "Dirección", onChange: handleAddressChange, value: address, name: "address", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#10b981] text-white rounded-lg p-2 font-roboto hover:bg-[#059669]", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Crear Invitación")), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#6b7280] text-sm mt-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Horario: 3 pm"), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, ` `))); }

Invitación para Santiago Chapa

Temática: Fútbol y Videojuegos

Fútbol y Videojuegos