Transaction: 48FbopE...XrEB

{ "data": { "carlosce.near": { "post": { "commit": { "text": "Primera Prueba", "type": "md", "keys": "[\"carlosce.near/widget/login/branch/draft\"]" } }, "widget": { "login": { "branch": { "draft": { "": "const healthQuestions = [\n \"Smoking\",\n \"Strokes\",\n \"Difficulty Walking\",\n \"Diabetic\",\n \"Physical disability\",\n \"Skin Cancer\",\n \"Asthma\",\n \"KidneyDisease\",\n];\n\nfunction Diagnosis2() {\n let navigate = useNavigate();\n const [answers, setAnswers] = useState(\n healthQuestions.reduce((acc, question) => {\n acc[question] = null; // Initialize all answers as null\n return acc;\n }, {})\n );\n\n const handleBack = () => {\n navigate(-1);\n };\n\n const handleNext = () => {\n navigate(\"/Diagnosis3\"); // Update with the correct route for the next step\n console.log(answers); // Here you would typically send this data to your backend\n };\n\n const handleToggle = (question, value) => {\n setAnswers((prevAnswers) => ({\n ...prevAnswers,\n [question]: value,\n }));\n };\n\n return (\n <div className=\"diagnosis\">\n <header className=\"diagnosis-header\">\n <img src={topLeftLogo} alt=\"Logo\" className=\"diagnosis-logo\" />\n <nav className=\"diagnosis-nav\">\n <a href=\"/about\">About</a>\n <a href=\"/support\">Support</a>\n <a href=\"/faq\">FAQ</a>\n <a href=\"/\" className=\"sign-out-btn\">\n Sign Out\n </a>\n </nav>\n </header>\n <main className=\"diagnosis-main\">\n {/* Content */}\n <form className=\"health-questions\">\n {healthQuestions.map((question, index) => (\n <div key={index} className=\"health-question\">\n <span>{question}</span>\n <div className=\"toggle-switches\">\n <button\n type=\"button\"\n className={`toggle-button ${\n answers[question] === true ? \"active\" : \"\"\n }`}\n onClick={() => handleToggle(question, true)}\n >\n Yes\n </button>\n <button\n type=\"button\"\n className={`toggle-button ${\n answers[question] === false ? \"active\" : \"\"\n }`}\n onClick={() => handleToggle(question, false)}\n >\n No\n </button>\n </div>\n </div>\n ))}\n </form>\n <div className=\"diagnosis-buttons\">\n <button onClick={handleBack} className=\"back-button\">\n Back\n </button>\n <button onClick={handleNext} className=\"next-button\">\n Next\n </button>\n </div>\n </main>\n <footer className=\"diagnosis-footer\">\n <span className=\"diagnosis-made-with\">\n Made with <img src={redHeart} alt=\"Heart\" /> at Oxford\n </span>\n <span className=\"diagnosis-supported-by\">\n Supported by <img src={supporterNearLogo} alt=\"Near Logo\" />\n </span>\n </footer>\n </div>\n );\n}\n\nexport default Diagnosis2;\n" } } } } } } }