refactor: extract page selection buttons into a separate component

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementPageSelectionMethod.tsx

@@ -5,41 +5,18 @@ import {
   ModalBody,
 } from 'reactstrap';
 
-import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
+import { useAiAssistantManagementModal } from '../../../stores/ai-assistant';
 
 import { AiAssistantManagementHeader } from './AiAssistantManagementHeader';
-
-import styles from './AiAssistantManagementPageSelectionMethod.module.scss';
-
-const moduleClass = styles['grw-ai-assistant-management-page-selection-method'] ?? '';
-
-const SelectionButton = (props: { icon: string, label: string, onClick: () => void }): JSX.Element => {
-  const { icon, label, onClick } = props;
-
-  return (
-    <button
-      type="button"
-      className="btn p-4 text-center page-selection-method-btn"
-      onClick={onClick}
-    >
-      <span
-        className="material-symbols-outlined d-block mb-3 fs-1"
-      >
-        {icon}
-      </span>
-      <div>{label}</div>
-    </button>
-  );
-};
-
+import { PageSelectionMethodButtons } from './PageSelectionMethodButtons';
 
 export const AiAssistantManagementPageSelectionMethod = (): JSX.Element => {
   const { t } = useTranslation();
-  const { data: aiAssistantManagementModalData, changePageMode } = useAiAssistantManagementModal();
+  const { data: aiAssistantManagementModalData } = useAiAssistantManagementModal();
   const isNewAiAssistant = aiAssistantManagementModalData?.aiAssistantData == null;
 
   return (
-    <div className={moduleClass}>
+    <>
       <AiAssistantManagementHeader
         hideBackButton={isNewAiAssistant}
         labelTranslationKey={isNewAiAssistant ? 'modal_ai_assistant.header.add_new_assistant' : 'modal_ai_assistant.header.update_assistant'}
@@ -49,23 +26,10 @@ export const AiAssistantManagementPageSelectionMethod = (): JSX.Element => {
         <h4 className="text-center fw-bold mb-4 mt-2">
           {t('modal_ai_assistant.select_source_pages')}
         </h4>
-        <div className="row justify-content-center">
-          <div className="col-auto">
-            <SelectionButton
-              icon="manage_search"
-              label={t('modal_ai_assistant.search_by_keyword')}
-              onClick={() => changePageMode(AiAssistantManagementModalPageMode.KEYWORD_SEARCH)}
-            />
-          </div>
-          <div className="col-auto">
-            <SelectionButton
-              icon="account_tree"
-              label={t('modal_ai_assistant.select_from_page_tree')}
-              onClick={() => changePageMode(AiAssistantManagementModalPageMode.PAGE_TREE_SELECTION)}
-            />
-          </div>
-        </div>
+
+        <PageSelectionMethodButtons />
+
       </ModalBody>
-    </div>
+    </>
   );
 };

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/AiAssistantManagementPageSelectionMethod.module.scss → apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/PageSelectionMethodButtons.module.scss

@@ -1,6 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 
-.grw-ai-assistant-management-page-selection-method :global {
+.page-selection-method-buttons :global {
   .page-selection-method-btn {
       width: 280px;
   }
@@ -8,7 +8,7 @@
 
 
 // == Colors
-.grw-ai-assistant-management-page-selection-method :global {
+.page-selection-method-buttons :global {
   .page-selection-method-btn {
       border: 2px solid bs.$gray-300;
       &:hover {

apps/app/src/features/openai/client/components/AiAssistant/AiAssistantManagementModal/PageSelectionMethodButtons.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { useTranslation } from 'react-i18next';
+
+import { useAiAssistantManagementModal, AiAssistantManagementModalPageMode } from '../../../stores/ai-assistant';
+
+import styles from './PageSelectionMethodButtons.module.scss';
+
+const moduleClass = styles['page-selection-method-buttons'] ?? '';
+
+const SelectionButton = (props: { icon: string, label: string, onClick: () => void }): JSX.Element => {
+  const { icon, label, onClick } = props;
+
+  return (
+    <button
+      type="button"
+      className="btn p-4 text-center page-selection-method-btn"
+      onClick={onClick}
+    >
+      <span
+        className="material-symbols-outlined d-block mb-3 fs-1"
+      >
+        {icon}
+      </span>
+      <div>{label}</div>
+    </button>
+  );
+};
+
+
+export const PageSelectionMethodButtons = (): JSX.Element => {
+  const { t } = useTranslation();
+  const { changePageMode } = useAiAssistantManagementModal();
+
+  return (
+    <div className={moduleClass}>
+      <div className="row justify-content-center">
+        <div className="col-auto">
+          <SelectionButton
+            icon="manage_search"
+            label={t('modal_ai_assistant.search_by_keyword')}
+            onClick={() => changePageMode(AiAssistantManagementModalPageMode.KEYWORD_SEARCH)}
+          />
+        </div>
+        <div className="col-auto">
+          <SelectionButton
+            icon="account_tree"
+            label={t('modal_ai_assistant.select_from_page_tree')}
+            onClick={() => changePageMode(AiAssistantManagementModalPageMode.PAGE_TREE_SELECTION)}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};