scroll to top button added

TODO

@@ -5,7 +5,8 @@
 //TODO about page
 //TODO contact page needs working mailer
 //TODO font size on mobile screen
-//TODO need a 'return to top' arrow button on smaller screens
+//TODO scroll to top button positioning
+//TODO add test for return to top button
 //TODO SEO - next headers etc
 ----------------------------------------------------------------
 //TODO logo for navbar and favicon

app/tournois/page.tsx

@@ -37,7 +37,7 @@ export default async function Tournaments() {
 
   return (
     <Layout>
-      <main className="grid lg:grid-cols-2">
+      <main className="relative grid lg:grid-cols-2">
         <div className="">
           <TournamentMap tournamentData={JSON.parse(tournamentData)} />
         </div>

components/Footer.tsx

@@ -4,7 +4,7 @@ import { FaGithub, FaRegEnvelope } from "react-icons/fa";
 export default function Footer() {
   return (
     <footer
-      className="grid w-full fixed bottom-0 justify-items-center py-2 px-5 text-white bg-teal-600 text-gray-900 dark:bg-gray-700"
+      className="grid w-full fixed bottom-0 justify-items-center py-2 px-5 text-white bg-teal-600 text-gray-900 dark:bg-gray-700 z-30"
       data-cy="footer"
     >
       <div className="p-2">

components/ScrollToTopButton.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { FaArrowUp } from "react-icons/fa";
+import { handleScrollToTop } from "@/handlers/scrollHandlers";
+
+const ScrollToTopButton = ({ isLgScreen }: { isLgScreen: boolean }) => {
+  // determine scrollable element based on screen size - window or div
+  const scrollToTopElement = isLgScreen
+    ? document.getElementById("tournament-table")
+    : window;
+
+  const scrollToTopButtonClass = isLgScreen
+    ? "absolute bottom-0 right-3 p-10"
+    : "sticky top-20";
+
+  return (
+    <button
+      className={`${scrollToTopButtonClass} z-10 text-2xl text-teal-900 dark:text-white`}
+    >
+      <FaArrowUp onClick={() => handleScrollToTop(scrollToTopElement)} />
+    </button>
+  );
+};
+
+export default ScrollToTopButton;

components/SearchBar.tsx

@@ -10,7 +10,6 @@ const SearchBar = ({
   setTournamentFilter,
 }: SearchBarProps) => {
   return (
-    <>
     <div className="p-3 bg-white dark:bg-gray-800">
       <label htmlFor="table-search" className="sr-only">
         Search
@@ -40,7 +39,6 @@ const SearchBar = ({
         />
       </div>
     </div>
-    </>
   );
 };
 

components/TournamentTable.tsx

@@ -3,6 +3,7 @@
 import { TournamentDataProps } from "@/types";
 import { useEffect, useState } from "react";
 import SearchBar from "@/components/SearchBar";
+import ScrollToTopButton from "@/components/ScrollToTopButton";
 
 export default function TournamentTable({
   tournamentData,
@@ -11,6 +12,7 @@ export default function TournamentTable({
   const [searchQuery, setSearchQuery] = useState(""); // text from search bar
   const [filteredTournamentData, setFilteredTournamentData] =
     useState(tournamentData);
+  const [isLgScreen, setIsLgScreen] = useState(false);
 
   useEffect(() => {
     setFilteredTournamentData(
@@ -18,6 +20,18 @@ export default function TournamentTable({
     );
   }, [searchQuery]);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setIsLgScreen(window.innerWidth >= 1024);
+    };
+    handleResize();
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   // TODO move this section into its own function
   if (filteredTournamentData.length === 0) {
     tableData = (
@@ -57,25 +71,34 @@ export default function TournamentTable({
     ));
   }
 
-  const stickyHeader =
-    "sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600";
-
   return (
-    <section className="w-full grid auto-rows-max pb-20 lg:h-[calc(100vh-174px)] lg:col-start-2 lg:col-end-3">
+    <section
+      className="tournament-table w-full grid auto-rows-max pb-20 lg:h-[calc(100vh-174px)] lg:col-start-2 lg:col-end-3 lg:overflow-y-scroll"
+      id="tournament-table"
+    >
       <SearchBar
         tournamentFilter={searchQuery}
         setTournamentFilter={setSearchQuery}
       />
+      <ScrollToTopButton isLgScreen={isLgScreen} />
       <table
         className="relative table-fixed w-full text-center text-xs"
         data-cy="tournament-table"
       >
         <thead>
           <tr>
-            <th className={stickyHeader}>Date</th>
-            <th className={stickyHeader}>Ville</th>
-            <th className={stickyHeader}>Tournois</th>
-            <th className={stickyHeader}>Cadence</th>
+            <th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
+              Date
+            </th>
+            <th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
+              Ville
+            </th>
+            <th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
+              Tournois
+            </th>
+            <th className="sticky top-0 p-3 bg-teal-600 text-white dark:bg-gray-600">
+              Cadence
+            </th>
           </tr>
         </thead>
         <tbody>{tableData}</tbody>

handlers/scrollHandlers.ts

@@ -0,0 +1,8 @@
+import { ScrollableElement } from "@/types";
+
+const isBrowser = () => typeof window !== "undefined";
+
+export const handleScrollToTop = (element: ScrollableElement | null) => {
+  if (!isBrowser()) return;
+  element?.scrollTo({ top: 0, behavior: "smooth" });
+};

types.ts

@@ -12,3 +12,5 @@ export interface Tournament {
 export interface TournamentDataProps {
   tournamentData: Tournament[];
 }
+
+export type ScrollableElement = Window | HTMLElement;