Show searchText

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

@@ -2,39 +2,55 @@ import React from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-export const SearchButtons = (): JSX.Element => {
+type Props = {
+  searchText: string
+}
+
+export const SearchButtons = (props: Props): JSX.Element => {
   const { t } = useTranslation('commons');
+  const { searchText } = props;
+
+  const shouldShowButton = searchText.length > 0;
 
   return (
     <table className="table">
       <tbody>
-        <tr>
-          <div className="text-muted ps-1 d-flex">
-            <span className="material-symbols-outlined fs-4 me-3">search</span>
-            <div className="ms-auto">
-              <span>Search in all</span>
+
+        { shouldShowButton && (
+          <tr>
+            <div className="text-muted ps-1 d-flex">
+              <span className="material-symbols-outlined fs-4 me-3">search</span>
+              <span>{searchText}</span>
+              <div className="ms-auto">
+                <span>Search in all</span>
+              </div>
             </div>
-          </div>
-        </tr>
+          </tr>
+        )}
 
         <tr>
           <div className="text-muted ps-1 d-flex">
             <span className="material-symbols-outlined fs-4 me-3">search</span>
             <code>~pagehoge/</code>
+            <span className="ms-2">{searchText}</span>
             <div className="ms-auto">
               <span>{t('header_search_box.item_label.This tree')}</span>
             </div>
           </div>
         </tr>
 
-        <tr>
-          <div className="text-muted ps-1 d-flex">
-            <span className="material-symbols-outlined fs-4 me-3">search</span>
-            <div className="ms-auto">
-              <span>Exact match</span>
+        { shouldShowButton && (
+          <tr>
+            <div className="text-muted ps-1 d-flex">
+              <span className="material-symbols-outlined fs-4 me-3">search</span>
+              <span>{`"${searchText}"`}</span>
+              <div className="ms-auto">
+                <span>Exact match</span>
+              </div>
             </div>
-          </div>
-        </tr>
+          </tr>
+        ) }
+
       </tbody>
     </table>
   );

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

@@ -38,7 +38,7 @@ const SearchModal = (): JSX.Element => {
           onClickClearButton={clickClearButtonHandler}
         />
         <div className="border-top mt-3 mb-3" />
-        <SearchButtons />
+        <SearchButtons searchText={searchText} />
         <div className="border-top mt-2 mb-2" />
         <SearchHelp />
       </ModalBody>