create three search buttons

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { useTranslation } from 'next-i18next';
+
+export const SearchButtons = (): JSX.Element => {
+  const { t } = useTranslation('commons');
+
+  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>
+            </div>
+          </div>
+        </tr>
+
+        <tr>
+          <div className="text-muted ps-1 d-flex">
+            <span className="material-symbols-outlined fs-4 me-3">search</span>
+            <code>~pagehoge/</code>
+            <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>
+            </div>
+          </div>
+        </tr>
+      </tbody>
+    </table>
+  );
+};

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

@@ -6,6 +6,7 @@ import { Modal, ModalBody } from 'reactstrap';
 
 import { useSearchModal } from '../stores/search';
 
+import { SearchButtons } from './SearchButtons';
 import { SearchForm } from './SearchForm';
 import { SearchHelp } from './SearchHelp';
 
@@ -36,7 +37,9 @@ const SearchModal = (): JSX.Element => {
           onChangeSearchText={changeSearchTextHandler}
           onClickClearButton={clickClearButtonHandler}
         />
-        <div className="border-top mt-4 mb-3" />
+        <div className="border-top mt-3 mb-3" />
+        <SearchButtons />
+        <div className="border-top mt-2 mb-2" />
         <SearchHelp />
       </ModalBody>
     </Modal>