diff --git a/package.json b/package.json index eefaebf..d724fa8 100644 --- 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 index 0b72e32..10a2dee 100644 --- 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 ( - +
{children} + ); diff --git a/src/components/goTopButton/goTopButton.tsx b/src/components/goTopButton/goTopButton.tsx new file mode 100644 index 0000000..e6a6d34 --- /dev/null +++ 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(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 && ( + + ) + ); +}; + +export default GoTopButton; diff --git a/yarn.lock b/yarn.lock index 3603ebf..f03c457 100644 --- 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"