feat: create go to top button

iqbalpa · Jul 19, 2024 · f204cfe · f204cfe
1 parent fa9cb8c
commit f204cfe
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "axios": "^1.7.2",
     "daisyui": "^4.12.10",
     "lint-staged": "^15.2.7",
+    "lucide-react": "^0.411.0",
     "next": "14.2.2",
     "react": "^18",
     "react-dom": "^18"

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
 import './globals.css';
 import Header from '@/components/header/header';
+import GoTopButton from '@/components/goTopButton/goTopButton';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -17,9 +18,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} bg-gray-800 text-slate-200`}>
+      <body
+        className={`${inter.className} relative bg-gray-800 text-slate-200`}
+      >
         <Header />
         {children}
+        <GoTopButton />
       </body>
     </html>
   );

diff --git a/src/components/goTopButton/goTopButton.tsx b/src/components/goTopButton/goTopButton.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { CircleChevronUp } from 'lucide-react';
+
+const GoTopButton: React.FC = () => {
+  const [showGoTop, setShowGoTop] = useState<boolean>(false);
+
+  const handleVisibleButton = () => {
+    const position = window.scrollY;
+    if (position > 50) {
+      setShowGoTop(true);
+    } else {
+      setShowGoTop(false);
+    }
+  };
+
+  const handleClick = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleVisibleButton);
+    return () => {
+      window.removeEventListener('scroll', handleVisibleButton);
+    };
+  }, []);
+
+  return (
+    showGoTop && (
+      <button
+        onClick={handleClick}
+        className="fixed bottom-10 right-10 rounded-full bg-slate-600 bg-opacity-80 p-2 text-white duration-100 hover:scale-105 hover:cursor-pointer hover:bg-slate-500 hover:bg-opacity-95"
+      >
+        <CircleChevronUp size={32} />
+      </button>
+    )
+  );
+};
+
+export default GoTopButton;
diff --git a/yarn.lock b/yarn.lock
@@ -1993,6 +1993,11 @@ lru-cache@^10.2.0:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.4.3.tgz#410fc8a17b70e598013df257c2446b7f3383f119"
   integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
 
+lucide-react@^0.411.0:
+  version "0.411.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.411.0.tgz#cecfcd6229057bbf26bb0c4cae1fd96babd77372"
+  integrity sha512-bDRvLt/jIIjsq4JVYB3EjyOtLHu8uQGzv7usri2DnVpOtfIRuLln96srS+d8WJsmJ52LBwDnYx7me/TSjZ6AcA==
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"