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,26 +33,33 @@ 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">
-      <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>
   );