Feature/botao voltar ao topo (#280)

Um pequeno botão que pode ser aplicado em uma página. irá se manter
invisivel enquanto o usuário não scrollar o equivalente a metade de seu
monitor.

nesse commit o elemento esta sendo aplicado em App.tsx, pois assim irá
ser aplicado globalmente em todas as páginas.
porem pode ser aplicado manualmente chamando o componente BackToTop na
página.

Visual do botão:
Normalmente quando visivel.

![image](https://github.com/SOS-RS/frontend/assets/57924586/16e5eb66-dadc-4cd4-b48c-5943ed4b6b40)

quando em foco ou com o ponteiro do mouse em cima, sem clicar:

![image](https://github.com/SOS-RS/frontend/assets/57924586/56a7e3a9-fb9c-4413-bc40-eb831793b27f)

Para noções de perspectiva, o botão ocupa 48x48 pixels.

Author: larissapissurno

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,41 @@
+import { useState } from "react"
+import { ArrowUp } from "lucide-react"
+
+
+const BackToTop =() => {
+
+    const [isVisible, setVisibility] = useState(false)
+
+    const scrollToTop = () => {
+        let root = document.getElementById('root')
+        if (!root) {return}
+
+        root.scrollTo({top:0, behavior:"smooth"})
+        
+    }
+
+    document.getElementById("root")?.addEventListener('scroll', (e) => {
+        if (e.target === null) {return}
+        let CurrentScrollHeight = (e.target as HTMLElement).scrollTop 
+        let WindowHeight = window.innerHeight
+
+        if ( CurrentScrollHeight > WindowHeight / 2) {
+            setVisibility(true)
+        } else {
+            setVisibility(false)
+        }
+    })
+
+
+return (isVisible && (
+    <button 
+    className=" fixed ease-in-out hidden sm:flex justify-center items-center duration-300 
+    bg-red-600/75 focus:bg-red-700 hover:bg-red-700 z-[100] shadow-slate-600/75
+    right-6 bottom-6 rounded-full shadow-md
+    w-12 h-12 "
+    onClick={scrollToTop}
+    ><ArrowUp color="white" /></button>
+));
+}
+
+export { BackToTop };

src/components/BackToTop/index.ts

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