Implementation of a component to display incremental search results

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -4,16 +4,20 @@ import React, {
 
 import { Modal, ModalBody } from 'reactstrap';
 
+import { useSWRxSearch } from '~/stores/search';
+
 import { useSearchModal } from '../stores/search';
 
 import { SearchForm } from './SearchForm';
 import { SearchHelp } from './SearchHelp';
+import { SearchResults } from './SearchResults';
 
 const SearchModal = (): JSX.Element => {
-  const { data: searchModalData, close: closeSearchModal } = useSearchModal();
-
   const [searchKeyword, setSearchKeyword] = useState('');
 
+  const { data: searchModalData, close: closeSearchModal } = useSearchModal();
+  const { data: searchResult } = useSWRxSearch(searchKeyword, null, { limit: 10 });
+
   const changeSearchTextHandler = useCallback((searchText: string) => {
     setSearchKeyword(searchText);
   }, []);
@@ -37,6 +41,7 @@ const SearchModal = (): JSX.Element => {
           onClickClearButton={clickClearButtonHandler}
         />
         <div className="border-top mt-4 mb-3" />
+        <SearchResults searchResult={searchResult} />
         <SearchHelp />
       </ModalBody>
     </Modal>

apps/app/src/features/search/client/components/SearchResults.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import { PagePathLabel, UserPicture } from '@growi/ui/dist/components';
+
+import type { IFormattedSearchResult } from '~/interfaces/search';
+
+
+type Props = {
+  searchResult?: IFormattedSearchResult
+}
+export const SearchResults = (props: Props): JSX.Element => {
+  const { searchResult } = props;
+
+  if (searchResult == null || searchResult.data.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <table>
+        <tbody>
+          {searchResult.data?.map((pageWithMeta, index) => (
+            <tr>
+              <div className="ps-1 mb-2">
+                <UserPicture />
+                <span className="ms-3 text-break text-wrap"><PagePathLabel path={pageWithMeta.data.path} /></span>
+                <span className="ms-3">{pageWithMeta.data.seenUsers.length}</span>
+              </div>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className="border-top mt-2 mb-2" />
+    </>
+  );
+};