From 9e544af2c537739424c3b73fbf2175183c6094b0 Mon Sep 17 00:00:00 2001
From: willian <williandeitosi@gmail.com>
Date: Sun, 19 May 2024 09:33:27 -0300
Subject: [PATCH 1/4] Adicionando botao para voltar ao topo

---
 src/App.tsx                                   |  2 +
 .../ScrollToTopButton/ScrollToTopButton.tsx   | 45 +++++++++++++++++++
 src/components/ScrollToTopButton/index.ts     |  3 ++
 src/components/ScrollToTopButton/types.ts     |  6 +++
 4 files changed, 56 insertions(+)
 create mode 100644 src/components/ScrollToTopButton/ScrollToTopButton.tsx
 create mode 100644 src/components/ScrollToTopButton/index.ts
 create mode 100644 src/components/ScrollToTopButton/types.ts

diff --git a/src/App.tsx b/src/App.tsx
index 478da36d..6c564956 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { Routes } from './routes/Routes';
 import { SessionProvider } from './contexts';
 import { Toaster } from './components/ui/toaster';
+import { ScrollToTopButton } from './components/ScrollToTopButton';
 
 const App = () => {
   return (
@@ -12,6 +13,7 @@ const App = () => {
       <BrowserRouter>
         <SessionProvider>
           <Routes />
+          <ScrollToTopButton />
         </SessionProvider>
       </BrowserRouter>
     </Fragment>
diff --git a/src/components/ScrollToTopButton/ScrollToTopButton.tsx b/src/components/ScrollToTopButton/ScrollToTopButton.tsx
new file mode 100644
index 00000000..daff4e52
--- /dev/null
+++ b/src/components/ScrollToTopButton/ScrollToTopButton.tsx
@@ -0,0 +1,45 @@
+import { useState, forwardRef } from 'react';
+import { IScrollToTopButton } from './types';
+import { cn } from '@/lib/utils';
+
+const ScrollToTopButton = forwardRef<HTMLButtonElement, IScrollToTopButton>(
+  ({ className = '', ...rest }, ref) => {
+    const [isVisible, setIsVisible] = useState(true);
+
+    const toggleVisibility = () => {
+      const scrolled = document.documentElement.scrollTop;
+      if (scrolled > 300) {
+        setIsVisible(true);
+      } else if (scrolled <= 300) {
+        setIsVisible(false);
+      }
+    };
+
+    const scrollToTop = () => {
+      console.log('scroll top');
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    };
+
+    window.addEventListener('scroll', toggleVisibility);
+
+    return (
+      <div className={cn('fixed bottom-24 right-8 hidden md:block', className)}>
+        {isVisible && (
+          <button
+            ref={ref}
+            onClick={scrollToTop}
+            className=" w-16 p-4 text-lg font-bold text-black bg-white border-2 border-black rounded-full shadow-lg hover:bg-black hover:text-white"
+            {...rest}
+          >
+            ↑
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+export { ScrollToTopButton };
diff --git a/src/components/ScrollToTopButton/index.ts b/src/components/ScrollToTopButton/index.ts
new file mode 100644
index 00000000..d8380d51
--- /dev/null
+++ b/src/components/ScrollToTopButton/index.ts
@@ -0,0 +1,3 @@
+import { ScrollToTopButton } from './ScrollToTopButton';
+
+export { ScrollToTopButton };
diff --git a/src/components/ScrollToTopButton/types.ts b/src/components/ScrollToTopButton/types.ts
new file mode 100644
index 00000000..6389149c
--- /dev/null
+++ b/src/components/ScrollToTopButton/types.ts
@@ -0,0 +1,6 @@
+// components/ScrollToTopButton/types.ts
+
+export interface IScrollToTopButton
+  extends React.ComponentPropsWithoutRef<'button'> {
+  className?: string;
+}

From 91d3d2749bfe82d69c1f7ef483bfb14f9b000f5b Mon Sep 17 00:00:00 2001
From: willian <williandeitosi@gmail.com>
Date: Sun, 19 May 2024 10:55:37 -0300
Subject: [PATCH 2/4] fix: state boolean

---
 src/components/ScrollToTopButton/ScrollToTopButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ScrollToTopButton/ScrollToTopButton.tsx b/src/components/ScrollToTopButton/ScrollToTopButton.tsx
index daff4e52..1701cc89 100644
--- a/src/components/ScrollToTopButton/ScrollToTopButton.tsx
+++ b/src/components/ScrollToTopButton/ScrollToTopButton.tsx
@@ -4,7 +4,7 @@ import { cn } from '@/lib/utils';
 
 const ScrollToTopButton = forwardRef<HTMLButtonElement, IScrollToTopButton>(
   ({ className = '', ...rest }, ref) => {
-    const [isVisible, setIsVisible] = useState(true);
+    const [isVisible, setIsVisible] = useState(false);
 
     const toggleVisibility = () => {
       const scrolled = document.documentElement.scrollTop;

From 5043ad4f7ca235b658f51c2a8370e2c1903c69c6 Mon Sep 17 00:00:00 2001
From: willian <williandeitosi@gmail.com>
Date: Sun, 19 May 2024 11:12:28 -0300
Subject: [PATCH 3/4] fix: bug scroll

---
 src/global.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/global.css b/src/global.css
index 80c42b80..a230855c 100644
--- a/src/global.css
+++ b/src/global.css
@@ -88,6 +88,5 @@
 
   #root {
     max-width: 100vw;
-    overflow-x: hidden;
   }
 }

From 7c92cc0d707dccc22f67a4b147bf22e0c41b95e9 Mon Sep 17 00:00:00 2001
From: willian <williandeitosi@gmail.com>
Date: Mon, 20 May 2024 05:55:06 -0300
Subject: [PATCH 4/4] remover o console.log e ajustei para telas maiores que
 1024px

---
 src/components/ScrollToTopButton/ScrollToTopButton.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/ScrollToTopButton/ScrollToTopButton.tsx b/src/components/ScrollToTopButton/ScrollToTopButton.tsx
index 1701cc89..d568d7ef 100644
--- a/src/components/ScrollToTopButton/ScrollToTopButton.tsx
+++ b/src/components/ScrollToTopButton/ScrollToTopButton.tsx
@@ -16,7 +16,6 @@ const ScrollToTopButton = forwardRef<HTMLButtonElement, IScrollToTopButton>(
     };
 
     const scrollToTop = () => {
-      console.log('scroll top');
       window.scrollTo({
         top: 0,
         behavior: 'smooth',
@@ -26,7 +25,7 @@ const ScrollToTopButton = forwardRef<HTMLButtonElement, IScrollToTopButton>(
     window.addEventListener('scroll', toggleVisibility);
 
     return (
-      <div className={cn('fixed bottom-24 right-8 hidden md:block', className)}>
+      <div className={cn('fixed bottom-24 right-8 hidden lg:block', className)}>
         {isVisible && (
           <button
             ref={ref}