Criado botao

Author: Lmedeiros-leiman

src/App.tsx

@@ -4,13 +4,15 @@ import { BrowserRouter } from 'react-router-dom';
 import { Routes } from './routes/Routes';
 import { SessionProvider } from './contexts';
 import { Toaster } from './components/ui/toaster';
+import { BackToTop } from '@/components/BackToTop';
 
 const App = () => {
   return (
     <Fragment>
       <Toaster />
       <BrowserRouter>
         <SessionProvider>
+          <BackToTop/>
           <Routes />
         </SessionProvider>
       </BrowserRouter>

src/components/BackToTop/BackToTop.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react"
+
+const BackToTop =() => {
+
+    const [isVisible, setVisibility] = useState(true)
+
+    const scrollToTop = () => {
+        window.scrollTo(0,0)
+
+        console.log("click!")
+    }
+
+    const toggleVisibility = () => {
+        if (window.scrollY >= window.innerHeight) {
+            setVisibility(true)
+        } else {
+            setVisibility(false)
+        }
+
+        console.log("scrooled")
+    }
+
+
+return (isVisible && (
+    <button 
+    className=" absolute bg-red-800/60 z-[100] right-10 bottom-10 w-12 h-12 rounded-full shadow-slate-500 font-bold shadow-md text-white select-none" 
+    onClick={scrollToTop} 
+    onScroll={toggleVisibility}
+    
+    
+    >^</button>
+));
+}
+
+export { BackToTop };

src/components/BackToTop/index.ts

@@ -0,0 +1,3 @@
+import { BackToTop } from "./BackToTop";
+
+export { BackToTop };