addded searchStats

src/components/SearchBar.tsx

@@ -52,6 +52,25 @@ const SearchButton = styled.div`
     align-items: center;
     justify-content: center;
 `;
+
+const SearchStats = styled.div`
+    @media (min-width: 1000px) {
+        width: 1000px;
+    }
+
+    @media (min-width: 450px) and (max-width: 1000px) {
+        width: 600px;
+    }
+
+    @media (max-width: 450px) {
+        width: 100%;
+    }
+    margin: auto;
+    color: #979797;
+    display: flex;
+    align-items: center;
+`;
+
 enum SuggestionType {
     DATE,
     LOCATION,
@@ -68,11 +87,15 @@ interface Props {
     setFiles: SetFiles;
     setCollections: SetCollections;
 }
+interface Stats {
+    resultCount: number;
+    timeTaken: number;
+}
 export default function SearchBar(props: Props) {
     const [allFiles, setAllFiles] = useState<File[]>([]);
     const [allCollections, setAllCollections] = useState<Collection[]>([]);
     const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
+    const [stats, setStats] = useState<Stats>(null);
     const selectRef = useRef(null);
     useEffect(() => {
         if (!props.isOpen && allFiles?.length > 0) {
@@ -126,6 +149,7 @@ export default function SearchBar(props: Props) {
         if (!selectedOption) {
             return;
         }
+        const startTime = Date.now();
         props.setOpen(true);
         let resultFiles: File[] = [];
 
@@ -148,6 +172,11 @@ export default function SearchBar(props: Props) {
         props.setCollections(
             getNonEmptyCollections(allCollections, resultFiles)
         );
+        const timeTaken = (Date.now() - startTime) / 1000;
+        setStats({
+            timeTaken,
+            resultCount: resultFiles.length,
+        });
     };
     const resetSearch = () => {
         if (props.isOpen) {
@@ -253,7 +282,9 @@ export default function SearchBar(props: Props) {
         }),
     };
 
-    return windowWidth > 450 || props.isOpen ? (
+    return (
+        <>
+            {windowWidth > 450 || props.isOpen ? (
                 <Wrapper>
                     <div
                         style={{
@@ -279,7 +310,10 @@ export default function SearchBar(props: Props) {
                     </div>
                     <div style={{ width: '24px' }}>
                         {props.isOpen && (
-                    <div style={{ cursor: 'pointer' }} onClick={resetSearch}>
+                            <div
+                                style={{ cursor: 'pointer' }}
+                                onClick={resetSearch}
+                            >
                                 <CrossIcon />
                             </div>
                         )}
@@ -289,5 +323,10 @@ export default function SearchBar(props: Props) {
                 <SearchButton onClick={() => props.setOpen(true)}>
                     <SearchIcon />
                 </SearchButton>
+            )}
+            {props.isOpen && (
+                <SearchStats>{constants.SEARCH_STATS(stats)}</SearchStats>
+            )}
+        </>
     );
 }

src/utils/strings/englishConstants.tsx

@@ -324,6 +324,13 @@ const englishConstants = {
             with ente
         </p>
     ),
+    SEARCH_STATS: ({ resultCount, timeTaken }) => (
+        <span>
+            found <span style={{ color: '#2dc262' }}>{resultCount}</span>{' '}
+            memories ( <span style={{ color: '#2dc262' }}> {timeTaken}</span>{' '}
+            seconds )
+        </span>
+    ),
 };
 
 export default englishConstants;