info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-01-17 22:28:32 +01:00
Code Issues Releases Wiki Activity

Add result count on search

Browse Source
This commit is contained in:
Kamran Ahmed 2024-03-20 16:13:28 +00:00
parent 88ddeeb5fb
commit 7cffcccfe8
2 changed files with 31 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx
View File

@ -12,7 +12,7 @@ import { Pagination } from '../Pagination/Pagination.tsx';
import { LoadingRoadmaps } from './LoadingRoadmaps.tsx';
import { EmptyRoadmaps } from './EmptyRoadmaps.tsx';
import { AIRoadmapsList } from './AIRoadmapsList.tsx';
import {ExploreAISearch} from "./ExploreAISearch.tsx";
import { ExploreAISearch } from './ExploreAISearch.tsx';
export interface AIRoadmapDocument {
_id?: string;
@ -153,6 +153,7 @@ export function ExploreAIRoadmap() {
<div className="my-3.5 flex items-stretch justify-between gap-2.5">
<ExploreAISearch
total={roadmapsResponse?.totalCount || 0}
isLoading={isLoading}
value={pageState.searchTerm}
onSubmit={(term: string) => {

50
src/components/ExploreAIRoadmap/ExploreAISearch.tsx
View File

@ -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,26 +33,33 @@ export function ExploreAISearch(props: ExploreAISearchProps) {
}, [debouncedTerm]);
return (
<div className="relative w-full max-w-[350px]">
<label
className="absolute left-3 flex h-full items-center text-gray-500"
htmlFor="search"
>
<Search className="h-4 w-4" />
</label>
<input
id="search"
name="search"
type="text"
placeholder="Type 3 or more characters to search..."
className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-none"
value={term}
onChange={(e) => setTerm(e.target.value)}
/>
{isLoading && (
<span className="absolute right-3 top-0 flex h-full items-center text-gray-500">
<Spinner isDualRing={false} className={`h-3 w-3`} />
</span>
<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"
>
<Search className="h-4 w-4" />
</label>
<input
id="search"
name="search"
type="text"
placeholder="Type 3 or more characters to search..."
className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-none"
value={term}
onChange={(e) => setTerm(e.target.value)}
/>
{isLoading && (
<span className="absolute right-3 top-0 flex h-full items-center text-gray-500">
<Spinner isDualRing={false} className={`h-3 w-3`} />
</span>
)}
</div>
{total > 0 && (
<p className="flex-shrink-0 text-sm text-gray-500">
{total} results found
</p>
)}
</div>
);