diff --git a/.vscode/settings.json b/.vscode/settings.json index 76ffeb7..783d6d3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,6 +7,7 @@ "Échecs", "Fédération", "Française", + "kodingdotninja", "Lente", "localisation", "moveend", @@ -17,6 +18,7 @@ "spiderfied", "Spiderfy", "spiderified", + "tailwindcss", "tournois", "unspiderfied", "unspiderfy" diff --git a/app/[lang]/tournois/TournamentTable.tsx b/app/[lang]/tournois/TournamentTable.tsx index b6a2506..7c6c66a 100644 --- a/app/[lang]/tournois/TournamentTable.tsx +++ b/app/[lang]/tournois/TournamentTable.tsx @@ -4,6 +4,7 @@ import { useEffect } from "react"; import { useTranslations } from "next-intl"; import { useAtomValue, useSetAtom, useAtom } from "jotai"; import { twMerge } from "tailwind-merge"; +import { FaExternalLinkAlt } from "react-icons/fa"; import { filteredTournamentsListAtom, @@ -12,13 +13,12 @@ import { debouncedHoveredMapTournamentIdAtom, debouncedHoveredListTournamentIdAtom, } from "@/app/atoms"; +import { useBreakpoint } from "@/hooks/tailwind"; import SearchBar from "./SearchBar"; import TimeControlFilters from "./TimeControlFilters"; import ScrollToTopButton from "./ScrollToTopButton"; -import { FaExternalLinkAlt } from "react-icons/fa"; - export default function TournamentTable() { const t = useTranslations("Tournaments"); @@ -32,15 +32,17 @@ export default function TournamentTable() { debouncedHoveredListTournamentIdAtom ); + const isLg = useBreakpoint("lg"); + useEffect(() => { - if (debouncedHoveredMapTournamentId === null) return; + if (!isLg || debouncedHoveredMapTournamentId === null) return; const tournamentRow = document.getElementById( debouncedHoveredMapTournamentId ); tournamentRow?.scrollIntoView({ behavior: "smooth" }); - }, [debouncedHoveredMapTournamentId]); + }, [debouncedHoveredMapTournamentId, isLg]); return (
{t("timeControl")} - + diff --git a/hooks/tailwind.ts b/hooks/tailwind.ts new file mode 100644 index 0000000..1381472 --- /dev/null +++ b/hooks/tailwind.ts @@ -0,0 +1,7 @@ +import create from "@kodingdotninja/use-tailwind-breakpoint"; +import resolveConfig from "tailwindcss/resolveConfig"; + +import tailwindConfig from "@/tailwind.config.js"; +const config = resolveConfig(tailwindConfig); + +export const { useBreakpoint } = create(config.theme!.screens); diff --git a/package-lock.json b/package-lock.json index 8b13acc..b2cfe2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "client", "version": "0.1.0", "dependencies": { + "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5", "@next/bundle-analyzer": "^13.4.7", "@types/node": "20.3.2", "@types/react": "18.2.14", @@ -515,6 +516,19 @@ "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==" }, + "node_modules/@kodingdotninja/use-tailwind-breakpoint": { + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/@kodingdotninja/use-tailwind-breakpoint/-/use-tailwind-breakpoint-0.0.5.tgz", + "integrity": "sha512-7h52zL+l+14u9diyjVcGoS5NRIwrc6euIGlHDwtJXlrR3h31RNyTrOfimy7PJTvS4fFdNgbzyrNcGfhj3sDRfQ==", + "peerDependencies": { + "react": ">=16.8" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + } + } + }, "node_modules/@next/bundle-analyzer": { "version": "13.4.7", "resolved": "https://registry.npmjs.org/@next/bundle-analyzer/-/bundle-analyzer-13.4.7.tgz", diff --git a/package.json b/package.json index 70e29f8..2672ca2 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "cypress": "cypress open" }, "dependencies": { + "@kodingdotninja/use-tailwind-breakpoint": "^0.0.5", "@next/bundle-analyzer": "^13.4.7", "@types/node": "20.3.2", "@types/react": "18.2.14",