From 3af812456dd4dbb2af47b6a5870912c0d425f676 Mon Sep 17 00:00:00 2001
From: TuvalSimha <tuval.simha@gmail.com>
Date: Thu, 13 Apr 2023 12:14:41 +0300
Subject: [PATCH 1/2] Back to top button

Signed-off-by: TuvalSimha <tuval.simha@gmail.com>
---
 src/components/BackToTop/index.tsx | 54 ++++++++++++++++++++++++++++++
 src/components/Layout/index.tsx    |  2 ++
 2 files changed, 56 insertions(+)
 create mode 100644 src/components/BackToTop/index.tsx

diff --git a/src/components/BackToTop/index.tsx b/src/components/BackToTop/index.tsx
new file mode 100644
index 0000000000..dd97862035
--- /dev/null
+++ b/src/components/BackToTop/index.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react"
+
+interface Props {
+  scrollThreshold: number;
+}
+
+const BackToTop: React.FC<Props> = ({  scrollThreshold }) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const pageHeight = document.body.scrollHeight;
+      const currentPosition = window.pageYOffset;
+      console.log(pageHeight, currentPosition);
+      if (pageHeight < 6000) {
+        setIsVisible(false);
+      } else {
+        if (currentPosition > scrollThreshold) {
+          setIsVisible(true);
+        } else {
+          setIsVisible(false);
+        }
+      }
+    };
+    window.addEventListener('scroll', handleScroll);
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [scrollThreshold]);
+
+  const handleBackToTopClick = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <>
+      {isVisible && (
+    <button
+    className={`bg-[#fb86cd] fixed bottom-10 right-5 cursor-pointer no-underline font-bold inline-flex text-center w-[fit-content] border-0 py-2 px-6 no-underline hover:no-underline focus:outline-none hover:drop-shadow-md hover:[transform:scale(1.05)] rounded text-sm sm:text-base whitespace-nowrap `}
+      onClick={handleBackToTopClick}
+    >
+    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+    </button>
+      )}
+    </>
+  );
+};
+
+
+
+export default BackToTop
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 255ec88d9c..0fde10e43e 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -4,6 +4,7 @@ import Header from "../Header"
 
 import "../../assets/css/style.less"
 import "../../assets/css/global.css"
+import BackToTop from "../BackToTop"
 interface Props {
   children: React.ReactNode
   className?: string
@@ -20,6 +21,7 @@ const IndexLayout = ({
       {children}
       <Footer sourcePath={sourcePath} />
     </div>
+    <BackToTop scrollThreshold={1000}/>
   </>
 )
 

From ec94e1625dd0961a6ca0ab2c45972dd4ccdd59db Mon Sep 17 00:00:00 2001
From: TuvalSimha <tuval.simha@gmail.com>
Date: Thu, 13 Apr 2023 12:17:00 +0300
Subject: [PATCH 2/2] prettier

Signed-off-by: TuvalSimha <tuval.simha@gmail.com>
---
 src/components/BackToTop/index.tsx | 65 +++++++++++++++++-------------
 src/components/Layout/index.tsx    |  2 +-
 2 files changed, 39 insertions(+), 28 deletions(-)

diff --git a/src/components/BackToTop/index.tsx b/src/components/BackToTop/index.tsx
index dd97862035..9a97012034 100644
--- a/src/components/BackToTop/index.tsx
+++ b/src/components/BackToTop/index.tsx
@@ -1,54 +1,65 @@
 import React, { useEffect, useState } from "react"
 
 interface Props {
-  scrollThreshold: number;
+  scrollThreshold: number
 }
 
-const BackToTop: React.FC<Props> = ({  scrollThreshold }) => {
-  const [isVisible, setIsVisible] = useState(false);
+const BackToTop: React.FC<Props> = ({ scrollThreshold }) => {
+  const [isVisible, setIsVisible] = useState(false)
 
   useEffect(() => {
     const handleScroll = () => {
-      const pageHeight = document.body.scrollHeight;
-      const currentPosition = window.pageYOffset;
-      console.log(pageHeight, currentPosition);
+      const pageHeight = document.body.scrollHeight
+      const currentPosition = window.pageYOffset
+      console.log(pageHeight, currentPosition)
       if (pageHeight < 6000) {
-        setIsVisible(false);
+        setIsVisible(false)
       } else {
         if (currentPosition > scrollThreshold) {
-          setIsVisible(true);
+          setIsVisible(true)
         } else {
-          setIsVisible(false);
+          setIsVisible(false)
         }
       }
-    };
-    window.addEventListener('scroll', handleScroll);
+    }
+    window.addEventListener("scroll", handleScroll)
     return () => {
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [scrollThreshold]);
+      window.removeEventListener("scroll", handleScroll)
+    }
+  }, [scrollThreshold])
 
   const handleBackToTopClick = () => {
     window.scrollTo({
       top: 0,
-      behavior: 'smooth',
-    });
-  };
+      behavior: "smooth",
+    })
+  }
 
   return (
     <>
       {isVisible && (
-    <button
-    className={`bg-[#fb86cd] fixed bottom-10 right-5 cursor-pointer no-underline font-bold inline-flex text-center w-[fit-content] border-0 py-2 px-6 no-underline hover:no-underline focus:outline-none hover:drop-shadow-md hover:[transform:scale(1.05)] rounded text-sm sm:text-base whitespace-nowrap `}
-      onClick={handleBackToTopClick}
-    >
-    <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
-    </button>
+        <button
+          className={`bg-[#fb86cd] fixed bottom-10 right-5 cursor-pointer no-underline font-bold inline-flex text-center w-[fit-content] border-0 py-2 px-6 no-underline hover:no-underline focus:outline-none hover:drop-shadow-md hover:[transform:scale(1.05)] rounded text-sm sm:text-base whitespace-nowrap `}
+          onClick={handleBackToTopClick}
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z"
+              fill="currentColor"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+            ></path>
+          </svg>
+        </button>
       )}
     </>
-  );
-};
-
-
+  )
+}
 
 export default BackToTop
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 0fde10e43e..ee46647be0 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -21,7 +21,7 @@ const IndexLayout = ({
       {children}
       <Footer sourcePath={sourcePath} />
     </div>
-    <BackToTop scrollThreshold={1000}/>
+    <BackToTop scrollThreshold={1000} />
   </>
 )