92083 create count badge component

packages/app/src/components/Common/CountBadge.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+
+type CountProps = {
+  count: number | null | undefined
+}
+
+const CountBadge: FC<CountProps> = (props:CountProps) => {
+  return (
+    <>
+      <span className="grw-pagetree-count px-2 badge badge-pill badge-light">
+        {props.count}
+      </span>
+    </>
+  );
+};
+
+export default CountBadge;

packages/app/src/components/Page/DisplaySwitcher.tsx

@@ -24,6 +24,7 @@ import ContentLinkButtons from '../ContentLinkButtons';
 import PageEditorByHackmd from '../PageEditorByHackmd';
 import EditorNavbarBottom from '../PageEditor/EditorNavbarBottom';
 import HashChanged from '../EventListeneres/HashChanged';
+import CountBadge from '../Common/CountBadge';
 
 
 const WIKI_HEADER_LINK = 120;
@@ -76,7 +77,7 @@ const DisplaySwitcher = (): JSX.Element => {
                       >
                         <PageListIcon />
                         {t('page_list')}
-                        <span>{pagingResult?.totalCount}</span> {/* for a count badge */}
+                        <CountBadge count={pagingResult?.totalCount} />
                       </button>
                     ) }
                   </div>
@@ -89,9 +90,9 @@ const DisplaySwitcher = (): JSX.Element => {
                         className="btn btn-block btn-outline-secondary grw-btn-page-accessories rounded-pill d-flex justify-content-between align-items-center"
                         onClick={() => smoothScrollIntoView(getCommentListDom, WIKI_HEADER_LINK)}
                       >
-                        <i className="mr-2 icon-fw icon-bubbles"></i>
+                        <i className="icon-fw icon-bubbles"></i>
                         <span>Comments</span>
-                        <span>{ comments != null ? comments.length : 0 }</span> {/* for a count badge */}
+                        <CountBadge count={comments != null ? comments.length : 0} />
                       </button>
                     </div>
                   ) }

packages/app/src/components/Sidebar/PageTree/Item.tsx

@@ -21,6 +21,7 @@ import { IPageForPageDuplicateModal } from '~/stores/modal';
 import TriangleIcon from '~/components/Icons/TriangleIcon';
 import { bookmark, unbookmark } from '~/client/services/page-operation';
 import ClosableTextInput, { AlertInfo, AlertType } from '../../Common/ClosableTextInput';
+import CountBadge from '../../Common/CountBadge';
 import { PageItemControl } from '../../Common/Dropdown/PageItemControl';
 import { ItemNode } from './ItemNode';
 import { usePageTreeDescCountMap } from '~/stores/ui';
@@ -93,21 +94,6 @@ const isDroppable = (fromPage?: Partial<IPageHasId>, newParentPage?: Partial<IPa
   return pagePathUtils.canMoveByPath(fromPage.path, newPathAfterMoved) && !pagePathUtils.isUsersTopPage(newParentPage.path);
 };
 
-
-type ItemCountProps = {
-  descendantCount: number
-}
-
-const ItemCount: FC<ItemCountProps> = (props:ItemCountProps) => {
-  return (
-    <>
-      <span className="grw-pagetree-count px-2 badge badge-pill badge-light">
-        {props.descendantCount}
-      </span>
-    </>
-  );
-};
-
 const Item: FC<ItemProps> = (props: ItemProps) => {
   const { t } = useTranslation();
   const {
@@ -465,7 +451,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
           )}
         {descendantCount > 0 && !isRenameInputShown && (
           <div className="grw-pagetree-count-wrapper">
-            <ItemCount descendantCount={descendantCount} />
+            <CountBadge count={descendantCount} />
           </div>
         )}
         <div className="grw-pagetree-control d-flex">