Manuel Bustillo
501bb3a81a
All checks were successful
Playwright Tests / test (pull_request) Has been skipped
Check usage of free licenses / build-static-assets (pull_request) Successful in 1m12s
Add copyright notice / copyright_notice (pull_request) Successful in 1m32s
Build Nginx-based docker image / build-static-assets (push) Successful in 6m2s
43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
|
|
|
|
'use client';
|
|
|
|
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
|
import { useSearchParams, usePathname, useRouter } from 'next/navigation';
|
|
import { useDebouncedCallback } from 'use-debounce';
|
|
|
|
|
|
export default function Search({ placeholder }: { placeholder: string }) {
|
|
const searchParams = useSearchParams();
|
|
const pathname = usePathname();
|
|
const { replace } = useRouter();
|
|
|
|
const handleSearch = useDebouncedCallback((term) => {
|
|
const params = new URLSearchParams(searchParams);
|
|
if (term) {
|
|
params.set('query', term);
|
|
} else {
|
|
params.delete('query');
|
|
}
|
|
replace(`${pathname}?${params.toString()}`);
|
|
|
|
}, 300);
|
|
|
|
return (
|
|
<div className="relative flex flex-1 flex-shrink-0">
|
|
<label htmlFor="search" className="sr-only">
|
|
Search
|
|
</label>
|
|
<input
|
|
className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
|
|
placeholder={placeholder}
|
|
onChange={(e) => {
|
|
handleSearch(e.target.value)
|
|
}}
|
|
defaultValue={searchParams.get('query')?.toString()}
|
|
/>
|
|
<MagnifyingGlassIcon className="absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
|
|
</div>
|
|
);
|
|
}
|