Merge pull request #34 from thedevdavid/feature/back-to-top

thedevdavid · web-flow · commit 943a37d5715a · 2023-07-09T14:57:38.000+02:00
feat: added back to top component
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Back to top button
+
 ## [0.5.0] - 2023-07-06
 
 ### Added
diff --git a/README.md b/README.md
@@ -171,6 +171,7 @@ Note: DO NOT overdo it. You can easily make images look bad with lossy compressi
 - [x] Not found page
 - [x] contributing docs
 - [x] Docs refresh
+- [x] Back to top button
 - [ ] Social sharing buttons
 - [ ] newsletter integration (form, api route, keys, welcome page, previous issues)
 - [ ] Other analytics providers (fathom, simplelytics, plausible, etc)
@@ -183,7 +184,9 @@ Note: DO NOT overdo it. You can easily make images look bad with lossy compressi
 - [ ] Code preview component
 - [ ] Code highlight improvements (copy code, theme)
 - [ ] `manifest.json`
-- [ ] Hidden content (behind email subscription)
+- [ ] Rich project cards
+- [ ] CV template
+- [ ] Authenticated pages and/or hidden content (behind email address)
 - [ ] 100 lighthouse score
 - [ ] Command bar fuzzy search in content
 - [ ] Pagination
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -5,6 +5,7 @@ import { Inter, Space_Grotesk } from "next/font/google";
 import siteMetadata from "@/lib/metadata";
 import { Toaster } from "@/components/ui/toaster";
 import { Analytics } from "@/components/analytics";
+import { BackTopButton } from "@/components/back-to-top";
 import { ThemeProvider } from "@/components/theme-provider";
 
 const spaceGrotesk = Space_Grotesk({
@@ -30,6 +31,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <body className="min-h-screen bg-gradient-to-b from-slate-100 to-white text-slate-900 antialiased dark:bg-gradient-to-b dark:from-gray-900 dark:to-gray-800 dark:text-slate-50">
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           {children}
+          <BackTopButton />
           <Toaster />
         </ThemeProvider>
       </body>
diff --git a/components/back-to-top.tsx b/components/back-to-top.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ArrowUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+const SCROLL_OFFSET: number = 1550;
+
+export const BackTopButton = () => {
+  let [show, setShow] = useState(false);
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    e.preventDefault();
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  useEffect(() => {
+    let handleWindowScroll = () => {
+      if (window.scrollY > SCROLL_OFFSET) setShow(true);
+      else setShow(false);
+    };
+
+    window.addEventListener("scroll", handleWindowScroll);
+    return () => window.removeEventListener("scroll", handleWindowScroll);
+  }, []);
+
+  return (
+    <Button
+      variant="default"
+      size="icon"
+      aria-label="Scroll To Top"
+      type="button"
+      onClick={handleClick}
+      className={cn(show ? "flex" : "hidden", "fixed bottom-8 right-8 z-50")}
+    >
+      <ArrowUp />
+    </Button>
+  );
+};
