Feature/add back to top button

pages/blog/[slug]/index.tsx

@@ -1,6 +1,6 @@
 import type { NextPage } from 'next'
 import { useRouter } from 'next/router'
-import { ReactElement } from 'react'
+import { ReactElement, useEffect, useState } from 'react'
 import PageLayout from '../../../components/common/layout/PageLayout'
 import Background from '../../../components/sections/blog/Background'
 import PageContent from '../../../components/sections/blog/[slug]/PageContent'
@@ -10,7 +10,7 @@ import {
   getFeaturedBlogs,
 } from '../../../lib/sanity'
 import {
-    SanityAuthor,
+  SanityAuthor,
   SanityBlog,
   SanityFooter,
   SanityNavigation,
@@ -24,8 +24,8 @@ interface BlogPageProps {
       seoData: SanitySeo
       footer: SanityFooter[]
     }
-    blogs: (Omit<SanityBlog, "author"> & { author: SanityAuthor })[]
-    featuredBlogs: (Omit<SanityBlog, "author"> & { author: SanityAuthor })[]
+    blogs: (Omit<SanityBlog, 'author'> & { author: SanityAuthor })[]
+    featuredBlogs: (Omit<SanityBlog, 'author'> & { author: SanityAuthor })[]
   }
 }
 
@@ -48,6 +48,22 @@ const BlogPage: NextPage<BlogPageProps> = ({ data }): ReactElement => {
   const displayBlogs = [...blogs, ...featuredBlogs].sort(
     (a, b) => +new Date(b._createdAt) - +new Date(a._createdAt)
   )
+  const [showBackToTop, setShowBackToTop] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setShowBackToTop(window.scrollY > 800)
+    }
+
+    // Check scroll position on initial load
+    handleScroll()
+
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
 
   return (
     <PageLayout
@@ -63,6 +79,16 @@ const BlogPage: NextPage<BlogPageProps> = ({ data }): ReactElement => {
           featuredPost={featuredPost}
         />
       )}
+      <div>
+        <a
+          href="#top"
+          className={`fixed bottom-28 right-6 tablet:right-11  back-to-top bg-[#ed5432] text-white py-2 px-3 lg:px-4 rounded font-bold transition-opacity duration-300 ${
+            showBackToTop ? 'opacity-100' : 'opacity-0 pointer-events-none'
+          }`}
+        >
+          ↑ Back to Top
+        </a>
+      </div>
     </PageLayout>
   )
 }

pages/blog/index.tsx

@@ -1,11 +1,11 @@
-import type { NextPage } from 'next'
-import { ReactElement } from 'react'
+import React, { ReactElement } from 'react'
+import { NextPage } from 'next'
 import PageLayout from '../../components/common/layout/PageLayout'
 import Background from '../../components/sections/blog/Background'
 import Blogs from '../../components/sections/blog/Blogs'
 import { getAllBlogs, getCommonData } from '../../lib/sanity'
 import {
-    SanityAuthor,
+  SanityAuthor,
   SanityBlog,
   SanityFooter,
   SanityNavigation,
@@ -19,8 +19,8 @@ interface BlogsPageProps {
       seoData: SanitySeo
       footer: SanityFooter[]
     }
-    blogs: (Omit<SanityBlog, "author"> & { author: SanityAuthor})[]
-    featuredBlogs: (Omit<SanityBlog, "author"> & { author: SanityAuthor})[]
+    blogs: (Omit<SanityBlog, 'author'> & { author: SanityAuthor })[]
+    featuredBlogs: (Omit<SanityBlog, 'author'> & { author: SanityAuthor })[]
   }
 }
 
@@ -30,8 +30,6 @@ const BlogsPage: NextPage<BlogsPageProps> = ({
     blogs,
   },
 }): ReactElement => {
-
-
   return (
     <PageLayout
       seoData={seoData}

styles/blog_text_content_wrapper.css

@@ -3,55 +3,55 @@
   white-space: pre-wrap;
 }
 
-.contentWrapper>h1 {
+.contentWrapper > h1 {
   font-weight: 700;
   font-size: 2.75rem;
   line-height: 1;
   letter-spacing: -0.02em;
   margin: 20px 0px;
 }
 
-.contentWrapper>h2 {
+.contentWrapper > h2 {
   font-weight: 700;
   font-size: 2.375rem;
   line-height: 2.6rem;
   letter-spacing: -0.02em;
   margin: 20px 0px;
 }
 
-.contentWrapper>h3 {
+.contentWrapper > h3 {
   font-weight: 700;
   font-size: 2rem;
   line-height: 2.5rem;
   letter-spacing: -0.02em;
   margin: 20px 0px;
 }
 
-.contentWrapper>h4 {
+.contentWrapper > h4 {
   font-weight: 700;
   font-size: 1.625rem;
   line-height: 2.2rem;
   letter-spacing: -0.02em;
   margin: 20px 0px;
 }
 
-.contentWrapper>h5 {
+.contentWrapper > h5 {
   font-weight: 700;
   font-size: 1.375rem;
   line-height: 2rem;
   letter-spacing: -0.02em;
   margin: 20px 0px;
 }
 
-.contentWrapper>h6 {
+.contentWrapper > h6 {
   font-weight: 700;
   font-size: 1.25rem;
   line-height: 1.75rem;
   letter-spacing: -0.02em;
   margin: 20px 0px;
 }
 
-.contentWrapper>p {
+.contentWrapper > p {
   font-weight: 400;
   font-size: 1.125rem;
   line-height: 1.75rem;
@@ -66,26 +66,32 @@
   text-decoration: underline;
 }
 
-.contentWrapper>ul {
+.contentWrapper > ul {
   padding-left: 24px;
 }
 
-.contentWrapper>ul>li {
+.contentWrapper > ul > li {
   font-weight: 400;
   font-size: 1.125rem;
   line-height: 1.75rem;
   letter-spacing: -0.02em;
   list-style: disc;
 }
 
-.contentWrapper>ol {
+.contentWrapper > ol {
   padding-left: 24px;
   list-style: auto;
 }
 
-.contentWrapper>ol>li {
+.contentWrapper > ol > li {
   font-weight: 400;
   font-size: 1.125rem;
   line-height: 1.75rem;
   letter-spacing: -0.02em;
+}
+.back-to-top:hover,
+.back-to-top:focus {
+  box-shadow: inset 0 3.25em 0 0 #fff;
+  color: #ed5432;
+  transition: 0.5s;
 }