From d18c2c502a0825d194875e983dac5c07e2e7d3e9 Mon Sep 17 00:00:00 2001
From: JubaAzul <118773284+JubaAzul@users.noreply.github.com>
Date: Tue, 14 Jan 2025 17:37:29 -0500
Subject: [PATCH] =?UTF-8?q?Button=20pour=20monter=20en=20haut=20de=20la=20?=
 =?UTF-8?q?page=20d'=C3=A9diteur=20de=20quiz?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/Teacher/EditorQuiz/EditorQuiz.tsx   | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
index e17c91c..88311fa 100644
--- a/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
+++ b/client/src/pages/Teacher/EditorQuiz/EditorQuiz.tsx
@@ -1,5 +1,5 @@
 // EditorQuiz.tsx
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, CSSProperties } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
 
 import { FolderType } from '../../../Types/FolderType';
@@ -40,6 +40,26 @@ const QuizForm: React.FC = () => {
     };
     const fileInputRef = useRef<HTMLInputElement>(null);
     const [dialogOpen, setDialogOpen] = useState(false);
+    const [showScrollButton, setShowScrollButton] = useState(false);
+
+    const scrollToTop = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (window.scrollY > 300) {
+                setShowScrollButton(true);
+            } else {
+                setShowScrollButton(false);
+            }
+        };
+
+        window.addEventListener('scroll', handleScroll);
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
 
     useEffect(() => {
         const fetchData = async () => {
@@ -292,8 +312,32 @@ const QuizForm: React.FC = () => {
 
             </div>
 
+            {showScrollButton && (
+                <Button
+                    onClick={scrollToTop}
+                    variant="contained"
+                    color="primary"
+                    style={scrollToTopButtonStyle}
+                    title="Scroll to top"
+                >
+                    ↑
+                </Button>
+            )}
         </div>
     );
 };
 
+const scrollToTopButtonStyle: CSSProperties = {
+    position: 'fixed',
+    bottom: '40px',
+    right: '50px',
+    padding: '10px',
+    fontSize: '16px',
+    color: 'white',
+    backgroundColor: '#5271ff',
+    border: 'none',
+    cursor: 'pointer',
+    zIndex: 1000,
+};
+
 export default QuizForm;