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

Merge pull request #71 from timothyarmes/clear-button

Browse Source 
Clear button for search (#62)
This commit is contained in:
Owen Rees
2023-07-05 22:58:44 +02:00
committed by GitHub
parent 2a5d89cf46 4fb471c40b
commit c29d11fd7b
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 { useTranslations } from "next-intl";
import { useAtom } from "jotai/index"; import { useAtom } from "jotai/index";
import { IoCloseOutline } from "react-icons/io5";
import { searchStringAtom } from "@/app/atoms"; import { searchStringAtom } from "@/app/atoms";
const SearchBar = () => { const SearchBar = () => {
@@ -26,10 +27,19 @@ const SearchBar = () => {
></path> ></path>
</svg> </svg>
</div> </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 <input
type="text" type="search"
id="table-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")} placeholder={t("searchPlaceholder")}
value={searchString} value={searchString}
onChange={(e) => setSearchString(e.target.value)} onChange={(e) => setSearchString(e.target.value)}
app/globals.css
+17
View File
@@ -25,3 +25,20 @@ body {
) )
rgb(var(--background-start-rgb)); rgb(var(--background-start-rgb));
} }
input[type="search"]::-ms-clear {
display: none;
width: 0;
height: 0;
}
input[type="search"]::-ms-reveal {
display: none;
width: 0;
height: 0;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}