From 9c1bea3bdc88f2bcf72ec1e8e9b68142d3582e34 Mon Sep 17 00:00:00 2001
From: Shubhashish-Chakraborty <shubhashish147@gmail.com>
Date: Sat, 15 Nov 2025 23:21:00 +0530
Subject: [PATCH 1/2] feat(ui): Added the Scroll to top button

---
 src/App.tsx                    |  2 ++
 src/components/ScrollToTop.tsx | 42 ++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 src/components/ScrollToTop.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 51b9d660..d0f43d0d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 import router from '@/routes';
+import ScrollToTop from './components/ScrollToTop';
 
 const App = () => {
   useEffect(() => {
@@ -24,6 +25,7 @@ const App = () => {
 
   return (
     <div className="min-h-screen flex flex-col bg-white dark:bg-gray-900">
+      <ScrollToTop />
       <RouterProvider router={router} />
     </div>
   );
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 00000000..6c90e412
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+
+export default function ScrollToTop() {
+    const [visible, setVisible] = useState(false);
+
+    useEffect(() => {
+        const onScroll = () => setVisible(window.scrollY > 300);
+        window.addEventListener('scroll', onScroll, { passive: true });
+        onScroll();
+        return () => window.removeEventListener('scroll', onScroll);
+    }, []);
+
+    if (!visible) return null;
+
+    return (
+        <button
+            aria-label="Scroll to top"
+            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+            style={{ zIndex: 9999 }}
+            className="
+        fixed right-5 bottom-6
+        w-15 h-15 rounded-lg border-none
+        bg-emerald-300 text-black shadow-lg
+        cursor-pointer flex items-center justify-center
+        opacity-95 hover:opacity-100 hover:-translate-y-[3px]
+        transition-transform duration-200 ease-in-out
+        focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2
+      "
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                stroke="currentColor"
+                width="35"
+                height="35"
+                fill="currentColor"
+                viewBox="0 0 640 640"
+            >
+                <path d="M342.6 81.4C330.1 68.9 309.8 68.9 297.3 81.4L137.3 241.4C124.8 253.9 124.8 274.2 137.3 286.7C149.8 299.2 170.1 299.2 182.6 286.7L288 181.3L288 552C288 569.7 302.3 584 320 584C337.7 584 352 569.7 352 552L352 181.3L457.4 286.7C469.9 299.2 490.2 299.2 502.7 286.7C515.2 274.2 515.2 253.9 502.7 241.4L342.7 81.4z" />
+            </svg>
+        </button>
+    );
+}
\ No newline at end of file

From f52a462db6769824745e1be0d80518bca2a195fc Mon Sep 17 00:00:00 2001
From: Shubhashish-Chakraborty <shubhashish147@gmail.com>
Date: Sat, 15 Nov 2025 23:44:56 +0530
Subject: [PATCH 2/2] fixed formatting

---
 src/components/ScrollToTop.tsx | 56 +++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
index 6c90e412..aa6d333f 100644
--- a/src/components/ScrollToTop.tsx
+++ b/src/components/ScrollToTop.tsx
@@ -1,23 +1,23 @@
 import { useEffect, useState } from 'react';
 
 export default function ScrollToTop() {
-    const [visible, setVisible] = useState(false);
+  const [visible, setVisible] = useState(false);
 
-    useEffect(() => {
-        const onScroll = () => setVisible(window.scrollY > 300);
-        window.addEventListener('scroll', onScroll, { passive: true });
-        onScroll();
-        return () => window.removeEventListener('scroll', onScroll);
-    }, []);
+  useEffect(() => {
+    const onScroll = () => setVisible(window.scrollY > 300);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+    return () => window.removeEventListener('scroll', onScroll);
+  }, []);
 
-    if (!visible) return null;
+  if (!visible) return null;
 
-    return (
-        <button
-            aria-label="Scroll to top"
-            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-            style={{ zIndex: 9999 }}
-            className="
+  return (
+    <button
+      aria-label="Scroll to top"
+      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+      style={{ zIndex: 9999 }}
+      className="
         fixed right-5 bottom-6
         w-15 h-15 rounded-lg border-none
         bg-emerald-300 text-black shadow-lg
@@ -26,17 +26,17 @@ export default function ScrollToTop() {
         transition-transform duration-200 ease-in-out
         focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2
       "
-        >
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                stroke="currentColor"
-                width="35"
-                height="35"
-                fill="currentColor"
-                viewBox="0 0 640 640"
-            >
-                <path d="M342.6 81.4C330.1 68.9 309.8 68.9 297.3 81.4L137.3 241.4C124.8 253.9 124.8 274.2 137.3 286.7C149.8 299.2 170.1 299.2 182.6 286.7L288 181.3L288 552C288 569.7 302.3 584 320 584C337.7 584 352 569.7 352 552L352 181.3L457.4 286.7C469.9 299.2 490.2 299.2 502.7 286.7C515.2 274.2 515.2 253.9 502.7 241.4L342.7 81.4z" />
-            </svg>
-        </button>
-    );
-}
\ No newline at end of file
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        stroke="currentColor"
+        width="35"
+        height="35"
+        fill="currentColor"
+        viewBox="0 0 640 640"
+      >
+        <path d="M342.6 81.4C330.1 68.9 309.8 68.9 297.3 81.4L137.3 241.4C124.8 253.9 124.8 274.2 137.3 286.7C149.8 299.2 170.1 299.2 182.6 286.7L288 181.3L288 552C288 569.7 302.3 584 320 584C337.7 584 352 569.7 352 552L352 181.3L457.4 286.7C469.9 299.2 490.2 299.2 502.7 286.7C515.2 274.2 515.2 253.9 502.7 241.4L342.7 81.4z" />
+      </svg>
+    </button>
+  );
+}