owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clear button for search (#62)

Browse Source
This commit is contained in:
Timothy Armes
2023-07-05 22:21:25 +02:00
parent 2a5d89cf46
commit 4fb471c40b
2 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/tournois/SearchBar.tsx
+12 -2
View File
@@ -1,5 +1,6 @@
import { useTranslations } from "next-intl";
import { useAtom } from "jotai/index";
import { IoCloseOutline } from "react-icons/io5";
import { searchStringAtom } from "@/app/atoms";
const SearchBar = () => {
@@ -26,10 +27,19 @@ const SearchBar = () => {
></path>
</svg>
</div>
{searchString !== "" && (
<div className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-900 dark:text-white">
<button onClick={() => setSearchString("")}>
<IoCloseOutline className="h-5 w-5" />
</button>
</div>
)}
<input
type="text"
type="search"
id="table-search"
className="block w-80 rounded-lg border border-gray-300 bg-gray-50 p-2.5 pl-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
className="block w-80 rounded-lg border border-gray-300 bg-gray-50 p-2.5 px-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
placeholder={t("searchPlaceholder")}
value={searchString}
onChange={(e) => setSearchString(e.target.value)}