function MainComponent() { const [page, setPage] = React.useState(0); const [answers, setAnswers] = React.useState({ unusedFiles: "", browsingData: "", unusedApps: "", socialMediaReview: "", unusedSocialMedia: "", deleteAttitude: "", emailCheckFrequency: "", unreadEmails: "", associatedAccounts: "", lossWorry: "" }); const questions = [ { question: "Do you find it difficult to delete old or unused files?", name: "unusedFiles", type: "radio", options: [ { label: "Yes", value: "yes" }, { label: "No", value: "no" } ] }, { question: "How often do you clear your browsing data?", name: "browsingData", type: "select", options: [ { label: "Never", value: "never" }, { label: "Rarely", value: "rarely" }, { label: "Sometimes", value: "sometimes" }, { label: "Always", value: "always" } ] }, { question: "How many unused apps do you have installed on your device?", name: "unusedApps", type: "select", options: [ { label: "None", value: "none" }, { label: "1-3", value: "1-3" }, { label: "4-6", value: "4-6" }, { label: "7+", value: "7+" } ] }, { question: "How often do you review your list of friends or people you follow on social media?", name: "socialMediaReview", type: "select", options: [ { label: "All the time", value: "all_the_time" }, { label: "Once in a while", value: "once_in_a_while" }, { label: "Rarely", value: "rarely" }, { label: "Never", value: "never" } ] }, { question: "Do you have any social media accounts that you don't use anymore?", name: "unusedSocialMedia", type: "radio", options: [ { label: "Yes", value: "yes" }, { label: "No", value: "no" } ] }, { question: "What is your attitude to deleting old or duplicate photos, documents, and other files?", name: "deleteAttitude", type: "select", options: [ { label: "Delete right away", value: "delete_right_away" }, { label: "Keep some stuff", value: "keep_some" }, { label: "Struggle to delete things", value: "struggle" }, { label: "Let it build up", value: "build_up" } ] }, { question: "How often do you check your email?", name: "emailCheckFrequency", type: "select", options: [ { label: "Never", value: "never" }, { label: "Once in a while", value: "once_in_a_while" }, { label: "Several times a day", value: "several_times" }, { label: "Constantly", value: "constantly" } ] }, { question: "Do you have any unread emails in your inbox?", name: "unreadEmails", type: "select", options: [ { label: "No", value: "no" }, { label: "1-10", value: "1-10" }, { label: "11-100", value: "11-100" }, { label: "101+", value: "101+" } ] }, { question: "How many accounts do you have associated with your email address?", name: "associatedAccounts", type: "select", options: [ { label: "1-5", value: "1-5" }, { label: "6-10", value: "6-10" }, { label: "11-20", value: "11-20" }, { label: "21+", value: "21+" } ] }, { question: "Do you ever worry about losing important files?", name: "lossWorry", type: "select", options: [ { label: "No", value: "no" }, { label: "Sometimes", value: "sometimes" }, { label: "Often", value: "often" }, { label: "Always", value: "always" } ] } ]; const handleRadioChange = (e)=>{ setAnswers((prevAnswers)=>({ ...prevAnswers, [e.target.name]: e.target.value })); }; const handleSelectChange = (e)=>{ setAnswers((prevAnswers)=>({ ...prevAnswers, [e.target.name]: e.target.value })); }; const nextPage = ()=>{ if (page <= questions.length) setPage((prevPage)=>prevPage + 1); }; const previousPage = ()=>{ if (page > 0) setPage((prevPage)=>prevPage - 1); }; const handleSubmit = (e)=>{ e.preventDefault(); nextPage(); }; let showQuestionContent; if (page >= 0 && page < questions.length) { const questionData = questions[page]; showQuestionContent = questionData.type === "radio" ? /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, questionData.options.map((option)=>/*#__PURE__*/ React.createElement("label", { key: option.value, className: "flex items-center", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "radio", name: questionData.name, value: option.value, checked: answers[questionData.name] === option.value, onChange: handleRadioChange, className: "mr-2 appearance-none checked:bg-blue-600 checked:border-transparent", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }), option.label))) : /*#__PURE__*/ React.createElement("select", { name: questionData.name, value: answers[questionData.name], onChange: handleSelectChange, className: "w-full p-2 rounded border", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, questionData.options.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, option.label))); } return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f2f5] p-4", __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-xl bg-white p-6 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 83, columnNumber: 7 }, __self: this }, page === 0 ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 85, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-3xl text-[#333] mb-6", __source: { fileName: "", lineNumber: 86, columnNumber: 13 }, __self: this }, "Take Our Digital Hoarding Quiz"), /*#__PURE__*/ React.createElement("button", { onClick: nextPage, className: "p-3 bg-[#4CAF50] text-white rounded-2xl font-medium hover:bg-[#45a049]", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this }, "Start Quiz")) : page > questions.length ? /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold text-3xl text-[#333] mb-6", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "Your Digital Hoarding Profile"), /*#__PURE__*/ React.createElement("p", { className: "mb-6", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, "Based on your answers, here is a profile of your digital hoarding behavior and some tips on what you can do against it."), /*#__PURE__*/ React.createElement("button", { onClick: previousPage, className: "p-3 bg-[#ff5722] text-white rounded-2xl font-medium hover:bg-[#fb4215]", __source: { fileName: "", lineNumber: 95, columnNumber: 13 }, __self: this }, "Back to Quiz")) : /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-semibold text-2xl text-[#333] mb-6", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this }, "Digital Hoarding Self-Test"), /*#__PURE__*/ React.createElement("div", { className: "space-y-2", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-medium", __source: { fileName: "", lineNumber: 101, columnNumber: 15 }, __self: this }, page, ". ", questions[page].question), showQuestionContent), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: previousPage, className: "w-full mr-2 p-3 bg-[#ff5722] text-white rounded-2xl font-medium hover:bg-[#fb4215]", __source: { fileName: "", lineNumber: 105, columnNumber: 15 }, __self: this }, "Previous"), /*#__PURE__*/ React.createElement("button", { type: page < questions.length - 1 ? "button" : "submit", onClick: page < questions.length - 1 ? nextPage : null, className: "w-full ml-2 p-3 bg-[#4CAF50] text-white rounded-2xl font-medium hover:bg-[#45a049]", __source: { fileName: "", lineNumber: 112, columnNumber: 15 }, __self: this }, page < questions.length - 1 ? "Next" : "See Results"))))); }