From aa9c6430063c66a14c739f40e6d9a65d5002bb6d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 28 Apr 2022 16:29:15 -0500
Subject: [PATCH] Break Counter into its own component

---
 app/soapbox/components/dropdown_menu.tsx       |  6 +++---
 app/soapbox/components/icon_with_counter.tsx   | 10 ++++++----
 .../components/sidebar-navigation-link.tsx     |  6 +++---
 app/soapbox/components/ui/counter/counter.tsx  | 18 ++++++++++++++++++
 app/soapbox/components/ui/icon/icon.tsx        |  7 +++++--
 app/soapbox/components/ui/index.ts             |  1 +
 app/soapbox/components/ui/tabs/tabs.tsx        |  6 ++++--
 7 files changed, 40 insertions(+), 14 deletions(-)
 create mode 100644 app/soapbox/components/ui/counter/counter.tsx

diff --git a/app/soapbox/components/dropdown_menu.tsx b/app/soapbox/components/dropdown_menu.tsx
index 8086eb276..18258c0f0 100644
--- a/app/soapbox/components/dropdown_menu.tsx
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -6,7 +6,7 @@ import { spring } from 'react-motion';
 import Overlay from 'react-overlays/lib/Overlay';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
-import { IconButton } from 'soapbox/components/ui';
+import { IconButton, Counter } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import Motion from 'soapbox/features/ui/util/optional_motion';
 
@@ -196,8 +196,8 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
           <span className='truncate'>{text}</span>
 
           {count ? (
-            <span className='ml-auto h-5 w-5 flex-none block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
-              {count}
+            <span className='ml-auto h-5 w-5 flex-none'>
+              <Counter count={count} />
             </span>
           ) : null}
         </a>
diff --git a/app/soapbox/components/icon_with_counter.tsx b/app/soapbox/components/icon_with_counter.tsx
index 0e09503cf..d0fd093a6 100644
--- a/app/soapbox/components/icon_with_counter.tsx
+++ b/app/soapbox/components/icon_with_counter.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Icon from 'soapbox/components/icon';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { Counter } from 'soapbox/components/ui';
 
 interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
   count: number,
@@ -14,9 +14,11 @@ const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, ...rest }) =
     <div className='relative'>
       <Icon id={icon} {...rest} />
 
-      {count > 0 && <i className='absolute -top-2 -right-2 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
-        {shortNumberFormat(count)}
-      </i>}
+      {count > 0 && (
+        <i className='absolute -top-2 -right-2'>
+          <Counter count={count} />
+        </i>
+      )}
     </div>
   );
 };
diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index fc63372e7..9dbedd46a 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
-import { Icon, Text } from './ui';
+import { Icon, Text, Counter } from './ui';
 
 interface ISidebarNavigationLink {
   count?: number,
@@ -44,8 +44,8 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       })}
       >
         {withCounter && count > 0 ? (
-          <span className='absolute -top-2 -right-2 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
-            {count}
+          <span className='absolute -top-2 -right-2'>
+            <Counter count={count} />
           </span>
         ) : null}
 
diff --git a/app/soapbox/components/ui/counter/counter.tsx b/app/soapbox/components/ui/counter/counter.tsx
new file mode 100644
index 000000000..00334539e
--- /dev/null
+++ b/app/soapbox/components/ui/counter/counter.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { shortNumberFormat } from 'soapbox/utils/numbers';
+
+interface ICounter {
+  count: number,
+}
+
+/** A simple counter for notifications, etc. */
+const Counter: React.FC<ICounter> = ({ count }) => {
+  return (
+    <span className='block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
+      {shortNumberFormat(count)}
+    </span>
+  );
+};
+
+export default Counter;
diff --git a/app/soapbox/components/ui/icon/icon.tsx b/app/soapbox/components/ui/icon/icon.tsx
index 224d15a9b..07b3ca831 100644
--- a/app/soapbox/components/ui/icon/icon.tsx
+++ b/app/soapbox/components/ui/icon/icon.tsx
@@ -1,7 +1,10 @@
 import React from 'react';
 
+import Counter from '../counter/counter';
+
 import SvgIcon from './svg-icon';
 
+
 interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
   className?: string,
   count?: number,
@@ -13,8 +16,8 @@ interface IIcon extends Pick<React.SVGAttributes<SVGAElement>, 'strokeWidth'> {
 const Icon = ({ src, alt, count, size, ...filteredProps }: IIcon): JSX.Element => (
   <div className='relative' data-testid='icon'>
     {count ? (
-      <span className='absolute -top-2 -right-3 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
-        {count}
+      <span className='absolute -top-2 -right-3'>
+        <Counter count={count} />
       </span>
     ) : null}
 
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index fa60595f5..127547f5f 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -2,6 +2,7 @@ export { default as Avatar } from './avatar/avatar';
 export { default as Button } from './button/button';
 export { Card, CardBody, CardHeader, CardTitle } from './card/card';
 export { default as Column } from './column/column';
+export { default as Counter } from './counter/counter';
 export { default as Emoji } from './emoji/emoji';
 export { default as EmojiSelector } from './emoji-selector/emoji-selector';
 export { default as Form } from './form/form';
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 4bd13ecab..a0dfe7abb 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -9,6 +9,8 @@ import classNames from 'classnames';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
+import Counter from '../counter/counter';
+
 import './tabs.css';
 
 const HORIZONTAL_PADDING = 8;
@@ -132,8 +134,8 @@ const Tabs = ({ items, activeItem }: ITabs) => {
       >
         <div className='relative'>
           {count ? (
-            <span className='absolute -top-2 left-full ml-1 block px-1.5 py-0.5 bg-accent-500 text-xs text-white rounded-full ring-2 ring-white'>
-              {count}
+            <span className='absolute -top-2 left-full ml-1'>
+              <Counter count={count} />
             </span>
           ) : null}