diff --git a/src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx b/src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx index d86cc67d8..f24e9504d 100644 --- a/src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx +++ b/src/components/ExploreAIRoadmap/ExploreAIRoadmap.tsx @@ -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() {
{ diff --git a/src/components/ExploreAIRoadmap/ExploreAISearch.tsx b/src/components/ExploreAIRoadmap/ExploreAISearch.tsx index 3c01718a9..3592f21cc 100644 --- a/src/components/ExploreAIRoadmap/ExploreAISearch.tsx +++ b/src/components/ExploreAIRoadmap/ExploreAISearch.tsx @@ -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 ( -
- - setTerm(e.target.value)} - /> - {isLoading && ( - - - +
+
+ + setTerm(e.target.value)} + /> + {isLoading && ( + + + + )} +
+ {total > 0 && ( +

+ {total} results found +

)}
);