feat(ui): add "go to top" button on post pages

resolve #29

src/app/(blog)/post/[slug]/page.tsx

@@ -8,6 +8,7 @@ import { FiTag } from 'react-icons/fi'
 import { allPosts, type Post } from 'contentlayer/generated'
 
 import { Date } from 'components/Date'
+import { TopButton } from 'components/TopButton'
 import { authors } from 'lib/authors'
 import { slug } from 'lib/utils'
 
@@ -84,6 +85,7 @@ export default function Page({ params }: Props) {
       <div className="post-content">
         <MDXContent />
       </div>
+      <TopButton />
     </div>
   )
 }

src/components/TopButton.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { CaretUp } from "@phosphor-icons/react"
+import { useEffect, useState } from "react"
+
+export function TopButton() {
+  const [percentScrollPosition, setPercentScrollPosition] = useState(0)
+  const [scrollPosition, setScrollPosition] = useState(0)
+  const [maxScrollValue, setMaxScrollValue] = useState(0)
+
+  function handleScroll() {
+    if (window) {
+      setScrollPosition(window.scrollY)
+    }
+    if (document) {
+      setMaxScrollValue(
+        document.documentElement.scrollHeight -
+        document.documentElement.clientHeight
+      )
+    }
+  }
+
+  useEffect(() => {
+    handleScroll()
+
+    if (window) {
+      window.addEventListener('scroll', handleScroll, { passive: true })
+    }
+  }, [])
+
+  useEffect(() => {
+    setPercentScrollPosition(
+      Math.round((scrollPosition / maxScrollValue) * 100)
+    )
+  }, [scrollPosition, maxScrollValue])
+
+  const isNotOnTop = percentScrollPosition > 0
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  return (
+    <button onClick={scrollToTop} title="Go to top" className={`fixed right-7 bottom-7 rounded-full hidden md:flex items-center justify-center p-2 hover:bg-neutral-200 hover:dark:bg-neutral-900 ${isNotOnTop ? 'opacity-100' : 'opacity-0'}`}>
+      <CaretUp className="text-2xl" />
+    </button>
+  )
+}