Merge branch 'staging' into rafael/navbar-fix

nuansacp2025 · Oct 15, 2024 · a48ec7e · a48ec7e
2 parents c12e150 + f55e1d7
commit a48ec7e
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 20 deletions.
diff --git a/app/components/scroll-to-top.tsx b/app/components/scroll-to-top.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import {useEffect} from "react";
+import {useAnimationControls, useScroll, motion, Variants} from "framer-motion";
+import {FaArrowAltCircleUp, FaArrowCircleUp, FaArrowUp} from "react-icons/fa"
+
+const isBrowser = () => typeof window != 'undefined';
+
+const ScrollToTopContainerVariants: Variants = {
+    hide: {opacity: 0, y: 100},
+    show: {opacity: 1, y: 0},
+}
+
+const scrollToTop = () => {
+    if (!isBrowser()) {
+        return;
+    }
+    window.scrollTo({top: 0, behavior: 'smooth'});
+};
+
+const ScrollToTopButton = () => {
+    const {scrollY} = useScroll();
+    const controls = useAnimationControls();
+
+    useEffect(() => {
+        return scrollY.on('change', (latestValue) => {
+            if (latestValue > window.innerHeight) {
+                controls.start('show');
+            } else {
+                controls.start('hide');
+            }
+        });
+    });
+
+    return (
+        <motion.button
+            className="fixed bottom-10 right-0 p-10"
+            variants={ScrollToTopContainerVariants}
+            initial="hide"
+            animate={controls}
+            onClick={scrollToTop}>
+            <FaArrowCircleUp className="text-4xl text-white" />
+        </motion.button>
+    );
+};
+
+export default ScrollToTopButton;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,7 @@ import Navbar from "./components/navbar";
 import ModalOverlay from "./components/modal-overlay";
 import Link from "next/link";
 import Footer from "./components/footer";
+import ScrollToTopButton from "@/app/components/scroll-to-top";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -23,6 +24,7 @@ export default function RootLayout({
       <body className={inter.className}>
         <Navbar />
         {children}
+        <ScrollToTopButton />
         <Footer />
       </body>
     </html>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "test": "jest --coverage"
   },
   "dependencies": {
-    "framer-motion": "^11.5.6",
+    "framer-motion": "^11.9.0",
     "next": "^14.2.5",
     "react": "^18",
     "react-dom": "^18",