|
|
|
@ -5,12 +5,13 @@ import { Spinner } from '../ReactIcons/Spinner.tsx'; |
|
|
|
|
|
|
|
|
|
type ExploreAISearchProps = { |
|
|
|
|
value: string; |
|
|
|
|
total: number; |
|
|
|
|
isLoading: boolean; |
|
|
|
|
onSubmit: (search: string) => void; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
export function ExploreAISearch(props: ExploreAISearchProps) { |
|
|
|
|
const { onSubmit, isLoading = false, value: defaultValue } = props; |
|
|
|
|
const { onSubmit, isLoading = false, total, value: defaultValue } = props; |
|
|
|
|
|
|
|
|
|
const [term, setTerm] = useState(defaultValue); |
|
|
|
|
const debouncedTerm = useDebounceValue(term, 500); |
|
|
|
@ -32,7 +33,8 @@ export function ExploreAISearch(props: ExploreAISearchProps) { |
|
|
|
|
}, [debouncedTerm]); |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<div className="relative w-full max-w-[350px]"> |
|
|
|
|
<div className="relative flex w-full items-center gap-3"> |
|
|
|
|
<div className="relative flex w-full max-w-[310px] items-center"> |
|
|
|
|
<label |
|
|
|
|
className="absolute left-3 flex h-full items-center text-gray-500" |
|
|
|
|
htmlFor="search" |
|
|
|
@ -54,5 +56,11 @@ export function ExploreAISearch(props: ExploreAISearchProps) { |
|
|
|
|
</span> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
{total > 0 && ( |
|
|
|
|
<p className="flex-shrink-0 text-sm text-gray-500"> |
|
|
|
|
{total} results found |
|
|
|
|
</p> |
|
|
|
|
)} |
|
|
|
|
</div> |
|
|
|
|
); |
|
|
|
|
} |
|
|
|
|