function MainComponent() { const [playgroundName, setPlaygroundName] = React.useState(''); const [invitee, setInvitee] = React.useState(''); const [invitations, setInvitations] = React.useState([ 'John Doe', 'Jane Smith' ]); const handleSendInvite = ()=>{ if (invitee.trim() !== '') { setInvitations([ ...invitations, invitee.trim() ]); setInvitee(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center bg-gray-100 h-screen p-6", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold my-4 font-crimson-text", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, "Playground App"), /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-8 font-crimson-text", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Invite people to hang out and play!"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "playground-name", placeholder: "Enter Playground Name", className: "mb-4 p-2 w-[300px] border border-gray-400 rounded-md", value: playgroundName, onChange: (e)=>setPlaygroundName(e.target.value), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "invitee", placeholder: "Invite Someone", className: "mb-4 p-2 w-[300px] border border-gray-400 rounded-md", value: invitee, onChange: (e)=>setInvitee(e.target.value), __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded-md w-[300px] font-roboto", onClick: handleSendInvite, __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Send Invite"), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-2 font-crimson-text", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, "Current Invitations"), /*#__PURE__*/ React.createElement("ul", { className: "list-none", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, invitations.map((person, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-2 bg-white my-2 w-[300px] shadow rounded-md", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, person))))); }