function MainComponent() { const [feedbackEntries, setFeedbackEntries] = React.useState([]); const [questions, setQuestions] = React.useState([ 'How would you rate the quality of our service?', 'How clean was the environment?', 'Please rate the ambiance and comfort.', 'What aspects of our service do you think we can improve?' ]); const [responses, setResponses] = React.useState(Array(questions.length).fill('')); const handleFormSubmit = async (event)=>{ event.preventDefault(); const geolocation = await getGeolocation(); const newFeedback = { geolocation, responses }; setFeedbackEntries([ ...feedbackEntries, newFeedback ]); setResponses(Array(questions.length).fill('')); }; const handleResponseChange = (index)=>(event)=>{ const updatedResponses = [ ...responses ]; updatedResponses[index] = event.target.value; setResponses(updatedResponses); }; const getGeolocation = ()=>{ return new Promise((resolve, reject)=>{ navigator.geolocation.getCurrentPosition((position)=>{ resolve({ latitude: position.coords.latitude, longitude: position.coords.longitude }); }, ()=>{ reject('Geolocation is not supported by this browser.'); }); }); }; const questionsElements = questions.map((question, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: `question-${index}`, className: "block text-sm font-sans text-gray-700 mb-1", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, question), /*#__PURE__*/ React.createElement("textarea", { id: `question-${index}`, name: `question-${index}`, value: responses[index], onChange: handleResponseChange(index), className: "shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md", rows: "3", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-6", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleFormSubmit, className: "space-y-8 divide-y divide-gray-200", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-8 divide-y divide-gray-200 sm:space-y-5", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center mb-6", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl leading-6 font-sans text-gray-900", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Customer Feedback Form"), /*#__PURE__*/ React.createElement("p", { className: "mt-1 text-sm font-sans text-gray-500", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "Your feedback is anonymous and helps us improve.")), questionsElements), /*#__PURE__*/ React.createElement("div", { className: "pt-5", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", className: "ml-3 inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-sans rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "Submit Feedback")))), /*#__PURE__*/ React.createElement("div", { className: "my-10", style: { display: 'none' }, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg leading-6 font-sans text-gray-900", __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, "Previous Feedback"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5 space-y-2 mt-4", __source: { fileName: "", lineNumber: 84, columnNumber: 9 }, __self: this }, feedbackEntries.map((feedback, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-sm font-sans text-gray-500", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "[Location: ", feedback.geolocation.latitude, ", ", feedback.geolocation.longitude, "] - Responses: ", feedback.responses.join(', ')))))); }