mirror of
https://github.com/TheRealOwenRees/echecsfrance.git
synced 2026-07-23 04:26:57 +00:00
Remove scroll to top button
This commit is contained in:
@@ -14,7 +14,6 @@ import {
|
|||||||
hoveredMapIdAtom,
|
hoveredMapIdAtom,
|
||||||
syncVisibleAtom,
|
syncVisibleAtom,
|
||||||
} from "@/atoms";
|
} from "@/atoms";
|
||||||
import ScrollToTopButton from "@/components/ScrollToTopButton";
|
|
||||||
import SearchBar from "@/components/SearchBar";
|
import SearchBar from "@/components/SearchBar";
|
||||||
import { useBreakpoint } from "@/hooks/tailwind";
|
import { useBreakpoint } from "@/hooks/tailwind";
|
||||||
|
|
||||||
@@ -60,8 +59,6 @@ const ClubTable = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ScrollToTopButton />
|
|
||||||
|
|
||||||
<div className="overflow-x-scroll bg-red-50">
|
<div className="overflow-x-scroll bg-red-50">
|
||||||
<table className="relative min-w-full table-fixed text-center text-xs lg:min-w-full">
|
<table className="relative min-w-full table-fixed text-center text-xs lg:min-w-full">
|
||||||
<thead>
|
<thead>
|
||||||
|
|||||||
@@ -20,7 +20,6 @@ import {
|
|||||||
normsOnlyAtom,
|
normsOnlyAtom,
|
||||||
syncVisibleAtom,
|
syncVisibleAtom,
|
||||||
} from "@/atoms";
|
} from "@/atoms";
|
||||||
import ScrollToTopButton from "@/components/ScrollToTopButton";
|
|
||||||
import SearchBar from "@/components/SearchBar";
|
import SearchBar from "@/components/SearchBar";
|
||||||
import { useBreakpoint } from "@/hooks/tailwind";
|
import { useBreakpoint } from "@/hooks/tailwind";
|
||||||
import useDatePickerWidth from "@/hooks/useDatePickerWidth";
|
import useDatePickerWidth from "@/hooks/useDatePickerWidth";
|
||||||
@@ -120,8 +119,6 @@ const TournamentTable = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ScrollToTopButton />
|
|
||||||
|
|
||||||
<div className="overflow-x-scroll">
|
<div className="overflow-x-scroll">
|
||||||
<table className="relative min-w-full table-fixed text-center text-xs lg:w-full">
|
<table className="relative min-w-full table-fixed text-center text-xs lg:w-full">
|
||||||
<thead>
|
<thead>
|
||||||
|
|||||||
@@ -1,38 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useEffect, useRef, useState } from "react";
|
|
||||||
|
|
||||||
import { FaArrowUp } from "react-icons/fa";
|
|
||||||
|
|
||||||
import { useBreakpoint } from "@/hooks/tailwind";
|
|
||||||
import { ScrollableElement } from "@/types";
|
|
||||||
import { handleScrollToTop } from "@/utils/scrollHandlers";
|
|
||||||
|
|
||||||
const ScrollToTopButton = () => {
|
|
||||||
const scrollToTopElementRef = useRef<ScrollableElement | null>(null);
|
|
||||||
const isLgScreen = useBreakpoint("lg");
|
|
||||||
|
|
||||||
// determine scrollable element based on screen size - window or div
|
|
||||||
useEffect(() => {
|
|
||||||
isLgScreen
|
|
||||||
? (scrollToTopElementRef.current = document.getElementById("listing"))
|
|
||||||
: (scrollToTopElementRef.current = window);
|
|
||||||
}, [isLgScreen]);
|
|
||||||
|
|
||||||
const scrollToTopButtonClass = isLgScreen
|
|
||||||
? "absolute bottom-0 right-3 p-10"
|
|
||||||
: "fixed bottom-20 right-3 py-10";
|
|
||||||
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
className={`${scrollToTopButtonClass} z-10 text-2xl text-primary-900 dark:text-white`}
|
|
||||||
data-test="scroll-to-top-button"
|
|
||||||
>
|
|
||||||
<FaArrowUp
|
|
||||||
onClick={() => handleScrollToTop(scrollToTopElementRef.current)}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ScrollToTopButton;
|
|
||||||
Reference in New Issue
Block a user