relocate components

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -27,11 +27,12 @@ import { useCurrentPagePath } from '~/stores/page';
 import { useNextThemes } from '~/stores/use-next-themes';
 import loggerFactory from '~/utils/logger';
 
-import { CustomNavTab } from '../CustomNavigation/CustomNavButton';
 import { NotAvailableForGuest } from '../NotAvailableForGuest';
 import { NotAvailableForReadOnlyUser } from '../NotAvailableForReadOnlyUser';
 
 import { CommentPreview } from './CommentPreview';
+import { SwitchingButtonGroup } from './SwitchingButtonGroup';
+
 
 import '@growi/editor/dist/style.css';
 import styles from './CommentEditor.module.scss';
@@ -324,7 +325,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
               <UserPicture user={currentUser} noLink noTooltip />
               <p className="ms-2 mb-0">Add a comment</p>
             </div>
-            <CustomNavTab showPreview={showPreview} onNavSelected={handleSelect} />
+            <SwitchingButtonGroup showPreview={showPreview} onSelected={handleSelect} />
           </div>
           <TabContent activeTab={showPreview ? 'comment_preview' : 'comment_editor'}>
             <TabPane tabId="comment_editor">

apps/app/src/components/CustomNavigation/CustomNavButton.module.scss → apps/app/src/components/PageComment/SwitchingButtonGroup.module.scss

@@ -1,7 +1,7 @@
 @use '@growi/core/scss/bootstrap/init' as bs;
 
 
-.grw-custom-nav-tab :global {
+.btn-group-switching :global {
   .btn {
     --bs-btn-border-width: 2px;
 
@@ -18,7 +18,7 @@
 
 // == Colors
 @include bs.color-mode(light) {
-  .grw-custom-nav-tab :global {
+  .btn-group-switching :global {
     .btn {
       $bg: var(--bs-gray-500);
 
@@ -32,7 +32,7 @@
   }
 }
 @include bs.color-mode(dark) {
-  .grw-custom-nav-tab :global {
+  .btn-group-switching :global {
     .btn {
       $bg: var(--bs-gray-800);
 

apps/app/src/components/CustomNavigation/CustomNavButton.tsx → apps/app/src/components/PageComment/SwitchingButtonGroup.tsx

@@ -3,9 +3,9 @@ import { memo } from 'react';
 
 import { useTranslation } from 'next-i18next';
 
-import styles from './CustomNavButton.module.scss';
+import styles from './SwitchingButtonGroup.module.scss';
 
-const moduleClass = styles['grw-custom-nav-tab'] ?? '';
+const moduleClass = styles['btn-group-switching'] ?? '';
 
 
 type SwitchingButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
@@ -33,17 +33,17 @@ const SwitchingButton = memo((props: SwitchingButtonProps) => {
 });
 
 
-type CustomNavTabProps = {
+type Props = {
   showPreview: boolean,
-  onNavSelected?: (showPreview: boolean) => void,
+  onSelected?: (showPreview: boolean) => void,
 };
 
-export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
+export const SwitchingButtonGroup = (props: Props): JSX.Element => {
 
   const { t } = useTranslation();
 
   const {
-    showPreview, onNavSelected,
+    showPreview, onSelected,
   } = props;
 
   return (
@@ -54,14 +54,14 @@ export const CustomNavTab = (props: CustomNavTabProps): JSX.Element => {
       <SwitchingButton
         active={!showPreview}
         className="px-2"
-        onClick={() => onNavSelected?.(false)}
+        onClick={() => onSelected?.(false)}
       >
         <span className="material-symbols-outlined me-1">edit_square</span>{t('Write')}
       </SwitchingButton>
       <SwitchingButton
         active={showPreview}
         className="ps-2 pe-3"
-        onClick={() => onNavSelected?.(true)}
+        onClick={() => onSelected?.(true)}
       >
         <span className="material-symbols-outlined me-0">play_arrow</span>{t('Preview')}
       </SwitchingButton>