function UpdateDetailsHeader({ title }) { return /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold text-center mt-8 mb-4 font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, title); } function UpdateDetailsHeaderStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UpdateDetailsHeader, { title: "Update Details", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function UpdateButton({ label }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-green-500 text-white py-2 rounded font-bold mt-4", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, label); } function UpdateButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(UpdateButton, { label: "Update", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [registeredUsers, setRegisteredUsers] = React.useState([]); const [searchPlate, setSearchPlate] = React.useState(''); const [updateDetails, setUpdateDetails] = React.useState({ carName: '', carNumber: '', mobileNumber: '' }); const handleRegister = (event)=>{ event.preventDefault(); const { carName, carNumber, mobileNumber, licensePlate } = event.target.elements; const newUser = { carName: carName.value, carNumber: carNumber.value, mobileNumber: mobileNumber.value, licensePlate: licensePlate.value }; setRegisteredUsers([ ...registeredUsers, newUser ]); }; const handleUpdate = (event)=>{ event.preventDefault(); const updatedUsers = registeredUsers.map((user)=>{ if (user.licensePlate === searchPlate) { return { ...user, ...updateDetails }; } return user; }); setRegisteredUsers(updatedUsers); }; const handleSearch = (event)=>{ const { value } = event.target; setSearchPlate(value); const user = registeredUsers.find((user)=>user.licensePlate === value); if (user) { setUpdateDetails({ carName: user.carName, carNumber: user.carNumber, mobileNumber: user.mobileNumber }); } else { setUpdateDetails({ carName: '', carNumber: '', mobileNumber: '' }); } }; const handleChange = (event)=>{ const { name, value } = event.target; setUpdateDetails((prevDetails)=>({ ...prevDetails, [name]: value })); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white p-6 rounded shadow-md", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center mb-6 font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "Church Parking Lot"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleRegister, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "carName", className: "block text-sm font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 52, columnNumber: 13 }, __self: this }, "Car Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "carName", name: "carName", className: "w-full px-4 py-2 border rounded", placeholder: "Enter your car name", __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "carNumber", className: "block text-sm font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, "Car Number"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "carNumber", name: "carNumber", className: "w-full px-4 py-2 border rounded", placeholder: "Enter your car number", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "mobileNumber", className: "block text-sm font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Mobile Number"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "mobileNumber", name: "mobileNumber", className: "w-full px-4 py-2 border rounded", placeholder: "Enter 10 digit mobile number", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "licensePlate", className: "block text-sm font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, "License Plate Number"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "licensePlate", name: "licensePlate", className: "w-full px-4 py-2 border rounded", placeholder: "Enter your license plate number", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(UpdateButton, { label: "Register", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement(UpdateDetailsHeader, { title: "Update Details", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleUpdate, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 73, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "searchLicensePlate", className: "block text-sm font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, "Search License Plate"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "searchLicensePlate", name: "searchLicensePlate", className: "w-full px-4 py-2 border rounded", placeholder: "Enter license plate number", value: searchPlate, onChange: handleSearch, __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "updateCarName", className: "block text-sm font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Car Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "updateCarName", name: "carName", className: "w-full px-4 py-2 border rounded", value: updateDetails.carName, onChange: handleChange, __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "updateCarNumber", className: "block text-sm font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "Car Number"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "updateCarNumber", name: "carNumber", className: "w-full px-4 py-2 border rounded", value: updateDetails.carNumber, onChange: handleChange, __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "updateMobileNumber", className: "block text-sm font-bold mb-1 font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Mobile Number"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "updateMobileNumber", name: "mobileNumber", className: "w-full px-4 py-2 border rounded", value: updateDetails.mobileNumber, onChange: handleChange, __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(UpdateButton, { label: "Update", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this })))); }