Radiquum/AniX
1
0
Fork 0
mirror of https://github.com/Radiquum/AniX.git synced 2025-04-05 07:44:38 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: add search box to the bookmarks catrgory page

Browse source
This commit is contained in:
Kentai Radiquum 2024-11-20 20:00:58 +05:00
parent 24e6009b81
commit 3ba48e6192
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
2 changed files with 50 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
app/pages/BookmarksCategory.tsx
View file

@ -36,6 +36,7 @@ export function BookmarksCategoryPage(props: any) {
const authState = useUserStore((state) => state.state);
const [selectedSort, setSelectedSort] = useState(0);
const [isLoadingEnd, setIsLoadingEnd] = useState(false);
const [searchVal, setSearchVal] = useState("");
const router = useRouter();
const getKey = (pageIndex: number, previousPageData: any) => {
@ -93,6 +94,54 @@ export function BookmarksCategoryPage(props: any) {
return (
<>
<form
className="flex-1 max-w-full mx-4 mb-4"
onSubmit={(e) => {
e.preventDefault();
router.push(`/search?q=${searchVal}&where=list&list=${props.slug}`);
}}
>
<label
htmlFor="default-search"
className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white"
>
Search
</label>
<div className="relative">
<div className="absolute inset-y-0 flex items-center pointer-events-none start-0 ps-3">
<svg
className="w-4 h-4 text-gray-500 dark:text-gray-400"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 20 20"
>
<path
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
/>
</svg>
</div>
<input
type="search"
id="default-search"
className="block w-full p-4 text-sm text-gray-900 border border-gray-300 rounded-lg ps-10 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Поиск аниме..."
required
value={searchVal}
onChange={(e) => setSearchVal(e.target.value)}
/>
<button
type="submit"
className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Поиск
</button>
</div>
</form>
<div className="flex items-center justify-between px-4 py-2 border-b-2 border-black dark:border-white">
<h1 className="font-bold text-md sm:text-xl md:text-lg xl:text-xl">
{props.SectionTitleMapping[props.slug]}

2
app/pages/Search.tsx
View file

@ -189,7 +189,7 @@ export function SearchPage() {
type="submit"
className="text-white absolute end-2.5 bottom-2.5 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Search
Поиск
</button>
</div>
</form>