function MainComponent() { const [isStaff, setIsStaff] = React.useState(true); const [isLoggedIn, setIsLoggedIn] = React.useState(false); const [email, setEmail] = React.useState(''); const [password, setPassword] = React.useState(''); const [activities, setActivities] = React.useState([]); const [customerActivities, setCustomerActivities] = React.useState([]); const [selectedActivity, setSelectedActivity] = React.useState(''); const [qrCode, setQrCode] = React.useState(''); const handleLogin = ()=>{ // Simulate login logic setIsLoggedIn(true); if (!isStaff) { // Only for customers: Fetch activities and QR code associated with the email // This is a placeholder for fetching logic setCustomerActivities([ 'Swimming', 'Archery' ]); setQrCode('customerQrCode.png'); } }; const handleActivityChange = (e)=>{ setSelectedActivity(e.target.value); }; const addActivity = ()=>{ if (selectedActivity && !activities.includes(selectedActivity)) { setActivities([ ...activities, selectedActivity ]); } }; const handleEmailChange = (e)=>{ setEmail(e.target.value); }; const handlePasswordChange = (e)=>{ setPassword(e.target.value); }; const toggleUserType = ()=>{ setIsStaff(!isStaff); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, !isLoggedIn ? /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: toggleUserType, className: "cursor-pointer text-[#007BFF]", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, isStaff ? "Switch to customer login" : "Switch to staff login"), /*#__PURE__*/ React.createElement("input", { className: "block w-full p-2 border border-gray-300 rounded", type: "email", placeholder: "Email", name: "email", value: email, onChange: handleEmailChange, __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }), isStaff && /*#__PURE__*/ React.createElement("input", { className: "block w-full p-2 border border-gray-300 rounded", type: "password", placeholder: "Password", name: "password", value: password, onChange: handlePasswordChange, __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-blue-500 text-white rounded", onClick: handleLogin, __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Login")) : isStaff ? /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-full p-2 border border-gray-300 rounded", value: selectedActivity, onChange: handleActivityChange, __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Select an activity"), /*#__PURE__*/ React.createElement("option", { value: "Swimming", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Swimming"), /*#__PURE__*/ React.createElement("option", { value: "Archery", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Archery")), /*#__PURE__*/ React.createElement("button", { className: "w-full p-2 bg-blue-500 text-white rounded", onClick: addActivity, __source: { fileName: "", lineNumber: 88, columnNumber: 13 }, __self: this }, "Add Activity"), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, activities.map((activity, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-2", __source: { fileName: "", lineNumber: 93, columnNumber: 17 }, __self: this }, activity)))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Activities:"), customerActivities.map((activity, index)=>/*#__PURE__*/ React.createElement("div", { key: index, __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, activity)), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 103, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: qrCode, alt: "Customer QR code", className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 104, columnNumber: 15 }, __self: this })))); }