Add result count on search

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

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