diff --git a/app/[lang]/tournois/SearchBar.tsx b/app/[lang]/tournois/SearchBar.tsx index 8332ed9..249eb21 100644 --- a/app/[lang]/tournois/SearchBar.tsx +++ b/app/[lang]/tournois/SearchBar.tsx @@ -1,11 +1,13 @@ -import { useAtom } from "jotai"; +import { Dispatch, SetStateAction } from "react"; import { useTranslations } from "next-intl"; -import { searchStringAtom } from "@/app/atoms"; +interface SearchBarProps { + searchString: string; + setSearchString: Dispatch>; +} -const SearchBar = () => { +const SearchBar = ({ searchString, setSearchString }: SearchBarProps) => { const t = useTranslations("Tournaments"); - const [searchString, setSearchString] = useAtom(searchStringAtom); return (
diff --git a/app/[lang]/tournois/TournamentTable.tsx b/app/[lang]/tournois/TournamentTable.tsx index afc23bf..044f79c 100644 --- a/app/[lang]/tournois/TournamentTable.tsx +++ b/app/[lang]/tournois/TournamentTable.tsx @@ -11,6 +11,7 @@ import { hoveredMapTournamentIdAtom, debouncedHoveredMapTournamentIdAtom, debouncedHoveredListTournamentIdAtom, + searchStringAtom, } from "@/app/atoms"; import SearchBar from "./SearchBar"; @@ -20,6 +21,7 @@ import ScrollToTopButton from "./ScrollToTopButton"; export default function TournamentTable() { const t = useTranslations("Tournaments"); + const [searchString, setSearchString] = useAtom(searchStringAtom); const filteredTournaments = useAtomValue(filteredTournamentsListAtom); const [syncVisible, setSyncVisible] = useAtom(syncVisibleAtom); const hoveredMapTournamentId = useAtomValue(hoveredMapTournamentIdAtom); @@ -39,6 +41,10 @@ export default function TournamentTable() { tournamentRow?.scrollIntoView({ behavior: "smooth" }); }, [debouncedHoveredMapTournamentId]); + const handleClearSearch = () => { + setSearchString(""); + }; + return (
- + +