Go To Top button

.github/workflows/trello.yml

@@ -10,8 +10,8 @@ on:
 jobs:
   build:
     runs-on: ubuntu-latest
-    steps: 
-      # Link PR to Trello    
+    steps:
+      # Link PR to Trello
       - name: Link to Trello
         uses: rematocorp/[email protected]
         with:

components/Badge/index.tsx

@@ -2,17 +2,17 @@ import Link from "next/link";
 import { ReactEventHandler } from "react";
 
 interface BadgeProps {
-  name: string
-  id: string | number
-  avatar: string
-  tokens: string | number
-  owned: boolean
+  name: string;
+  id: string | number;
+  avatar: string;
+  tokens: string | number;
+  owned: boolean;
 }
 
 export default function Badge({ name, id, avatar, tokens, owned }: BadgeProps) {
   const imageOnError: ReactEventHandler<HTMLImageElement> = (e) => {
-    e.currentTarget.src='/images/badges/badge-template.png' 
-  }
+    e.currentTarget.src = "/images/badges/badge-template.png";
+  };
 
   return (
     <Link

components/GoToTop/index.tsx

@@ -0,0 +1,33 @@
+import { faArrowCircleUp } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
+
+export default function GoToTop() {
+  const [showButton, setShowButton] = useState(false);
+
+  useEffect(() => {
+    window.addEventListener("scroll", () => {
+      if (window.scrollY > 400) {
+        setShowButton(true);
+      } else {
+        setShowButton(false);
+      }
+    });
+  }, []);
+
+  const goToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <FontAwesomeIcon
+      icon={faArrowCircleUp}
+      className={"fixed right-5 bottom-5 cursor-pointer text-3xl"}
+      visibility={showButton ? "visible" : "hidden"}
+      onClick={goToTop}
+    />
+  );
+}

layout/Attendee/Badgedex/Badgedex.tsx

@@ -8,26 +8,27 @@ import Layout from "@components/Layout";
 import ErrorMessage from "@components/ErrorMessage";
 import Badge from "@components/Badge";
 import BadgeFilter from "@components/BadgeFilter";
+import GoToTop from "@components/GoToTop";
 
 export interface Badges {
-  avatar: string
-  begin: string
-  description: string
-  end: string
-  id: number
-  name: string
-  tokens: number
-  type: number
+  avatar: string;
+  begin: string;
+  description: string;
+  end: string;
+  id: number;
+  name: string;
+  tokens: number;
+  type: number;
 }
 
 interface UserWithBadges {
   user: {
-    badges: Badges[]
-  }
+    badges: Badges[];
+  };
 }
 
 function Badgedex() {
-  const { user }: UserWithBadges  = useAuth();
+  const { user }: UserWithBadges = useAuth();
   const [allBadges, updateAllBadges] = useState<Badges[]>([]);
   const [all, updateAll] = useState(true);
   const [filter, updateFilter] = useState(null);
@@ -91,6 +92,7 @@ function Badgedex() {
       </div>
 
       {error && <ErrorMessage />}
+      <GoToTop />
     </Layout>
   );
 }