2023-04-17 23:00:47 -04:00
|
|
|
'use client';
|
|
|
|
|
2023-07-24 21:40:29 -05:00
|
|
|
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
2023-05-12 16:02:51 -07:00
|
|
|
import { createUrl } from 'lib/utils';
|
2023-09-18 15:25:03 -05:00
|
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
2023-04-17 23:00:47 -04:00
|
|
|
|
|
|
|
export default function Search() {
|
|
|
|
const router = useRouter();
|
|
|
|
const searchParams = useSearchParams();
|
|
|
|
|
|
|
|
function onSubmit(e: React.FormEvent<HTMLFormElement>) {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
const val = e.target as HTMLFormElement;
|
|
|
|
const search = val.search as HTMLInputElement;
|
2023-05-12 16:02:51 -07:00
|
|
|
const newParams = new URLSearchParams(searchParams.toString());
|
2023-04-17 23:00:47 -04:00
|
|
|
|
|
|
|
if (search.value) {
|
2023-05-12 16:02:51 -07:00
|
|
|
newParams.set('q', search.value);
|
2023-04-17 23:00:47 -04:00
|
|
|
} else {
|
2023-05-12 16:02:51 -07:00
|
|
|
newParams.delete('q');
|
2023-04-17 23:00:47 -04:00
|
|
|
}
|
2023-05-12 16:02:51 -07:00
|
|
|
|
|
|
|
router.push(createUrl('/search', newParams));
|
2023-04-17 23:00:47 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
2023-07-31 09:18:50 -05:00
|
|
|
<form onSubmit={onSubmit} className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
|
2023-04-17 23:00:47 -04:00
|
|
|
<input
|
2023-10-10 21:45:55 -05:00
|
|
|
key={searchParams?.get('q')}
|
2023-04-17 23:00:47 -04:00
|
|
|
type="text"
|
|
|
|
name="search"
|
|
|
|
placeholder="Search for products..."
|
|
|
|
autoComplete="off"
|
2023-09-18 15:25:03 -05:00
|
|
|
defaultValue={searchParams?.get('q') || ''}
|
2023-07-25 12:40:39 -05:00
|
|
|
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
|
2023-04-17 23:00:47 -04:00
|
|
|
/>
|
2023-04-20 10:40:29 -05:00
|
|
|
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
|
2023-07-24 21:40:29 -05:00
|
|
|
<MagnifyingGlassIcon className="h-4" />
|
2023-04-17 23:00:47 -04:00
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|
2024-03-26 16:15:01 -05:00
|
|
|
|
|
|
|
export function SearchSkeleton() {
|
|
|
|
return (
|
|
|
|
<form className="w-max-[550px] relative w-full lg:w-80 xl:w-full">
|
|
|
|
<input
|
|
|
|
placeholder="Search for products..."
|
|
|
|
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
|
|
|
|
/>
|
|
|
|
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
|
|
|
|
<MagnifyingGlassIcon className="h-4" />
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
);
|
|
|
|
}
|