From d214e956a7e902dab8bc8cd8f31af69a4dbe8d48 Mon Sep 17 00:00:00 2001
From: Hamid Mustafa <92197613+ItsHamidMustafa@users.noreply.github.com>
Date: Fri, 15 Nov 2024 08:24:34 +0500
Subject: [PATCH] Create ScrollToTopButton.jsx

Added a scroll to top button, haven't styled it because I don't know how to add it to the main file, typically named App.jsx in react projects. This is my first time working in TypeScript and Next.js
---
 frontend/src/ScrollToTopButton.jsx | 45 ++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 frontend/src/ScrollToTopButton.jsx

diff --git a/frontend/src/ScrollToTopButton.jsx b/frontend/src/ScrollToTopButton.jsx
new file mode 100644
index 000000000..bbf6295f2
--- /dev/null
+++ b/frontend/src/ScrollToTopButton.jsx
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { IconButton } from '@chakra-ui/react';
+import { ArrowUpIcon } from '@chakra-ui/icons';
+
+const ScrollToTopButton = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const toggleVisibility = () => {
+    if (window.scrollY > 200) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  };
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', toggleVisibility);
+    return () => window.removeEventListener('scroll', toggleVisibility);
+  }, []);
+
+  return (
+    isVisible && (
+      <IconButton
+        position="fixed"
+        bottom="20px"
+        right="20px"
+        colorScheme="teal"
+        icon={<ArrowUpIcon />}
+        onClick={scrollToTop}
+        aria-label="Scroll to top"
+        size="lg"
+        boxShadow="lg"
+        zIndex="1000"
+      />
+    )
+  );
+};
+
+export default ScrollToTopButton;