info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-12 04:04:08 +02: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
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 { LoadingRoadmaps } from './LoadingRoadmaps.tsx';
import { EmptyRoadmaps } from './EmptyRoadmaps.tsx'; import { EmptyRoadmaps } from './EmptyRoadmaps.tsx';
import { AIRoadmapsList } from './AIRoadmapsList.tsx'; import { AIRoadmapsList } from './AIRoadmapsList.tsx';
import {ExploreAISearch} from "./ExploreAISearch.tsx"; import { ExploreAISearch } from './ExploreAISearch.tsx';
export interface AIRoadmapDocument { export interface AIRoadmapDocument {
_id?: string; _id?: string;
@@ -153,6 +153,7 @@ export function ExploreAIRoadmap() {
<div className="my-3.5 flex items-stretch justify-between gap-2.5"> <div className="my-3.5 flex items-stretch justify-between gap-2.5">
<ExploreAISearch <ExploreAISearch
total={roadmapsResponse?.totalCount || 0}
isLoading={isLoading} isLoading={isLoading}
value={pageState.searchTerm} value={pageState.searchTerm}
onSubmit={(term: string) => { onSubmit={(term: string) => {

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

@@ -5,12 +5,13 @@ import { Spinner } from '../ReactIcons/Spinner.tsx';
type ExploreAISearchProps = { type ExploreAISearchProps = {
value: string; value: string;
total: number;
isLoading: boolean; isLoading: boolean;
onSubmit: (search: string) => void; onSubmit: (search: string) => void;
}; };
export function ExploreAISearch(props: ExploreAISearchProps) { 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 [term, setTerm] = useState(defaultValue);
const debouncedTerm = useDebounceValue(term, 500); const debouncedTerm = useDebounceValue(term, 500);
@@ -32,26 +33,33 @@ export function ExploreAISearch(props: ExploreAISearchProps) {
}, [debouncedTerm]); }, [debouncedTerm]);
return ( return (
<div className="relative w-full max-w-[350px]"> <div className="relative flex w-full items-center gap-3">
<label <div className="relative flex w-full max-w-[310px] items-center">
className="absolute left-3 flex h-full items-center text-gray-500" <label
htmlFor="search" className="absolute left-3 flex h-full items-center text-gray-500"
> htmlFor="search"
<Search className="h-4 w-4" /> >
</label> <Search className="h-4 w-4" />
<input </label>
id="search" <input
name="search" id="search"
type="text" name="search"
placeholder="Type 3 or more characters to search..." type="text"
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" placeholder="Type 3 or more characters to search..."
value={term} 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"
onChange={(e) => setTerm(e.target.value)} value={term}
/> onChange={(e) => setTerm(e.target.value)}
{isLoading && ( />
<span className="absolute right-3 top-0 flex h-full items-center text-gray-500"> {isLoading && (
<Spinner isDualRing={false} className={`h-3 w-3`} /> <span className="absolute right-3 top-0 flex h-full items-center text-gray-500">
</span> <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> </div>
); );