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 { 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) => {

12
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,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>
);
}