From b9a3f7ec13f987bd5c2a20f6d5143c4ec47a9133 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 20 Nov 2022 16:05:53 -0600
Subject: [PATCH] StatusInteractionBar: break into InteractionCounter component

---
 app/soapbox/components/ui/text/text.tsx       |  2 +-
 .../components/status-interaction-bar.tsx     | 72 ++++++++++---------
 tailwind.config.js                            |  3 +
 3 files changed, 42 insertions(+), 35 deletions(-)

diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 7669f3d2a..0f8d4e67b 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -51,7 +51,7 @@ const families = {
 };
 
 export type Sizes = keyof typeof sizes
-type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'
+type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'div'
 type Directions = 'ltr' | 'rtl'
 
 interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'dangerouslySetInnerHTML'> {
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index 34de4f692..e6f1358fe 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/app/soapbox/features/status/components/status-interaction-bar.tsx
@@ -73,19 +73,13 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
           onClick={handleOpenReblogsModal}
           className='text-gray-600 dark:text-gray-700 hover:underline'
         >
-          <HStack space={1} alignItems='center'>
-            <Text theme='primary' size='sm' weight='bold'>
-              <FormattedNumber value={status.reblogs_count} />
-            </Text>
-
-            <Text theme='muted' size='sm'>
-              <FormattedMessage
-                id='status.interactions.reblogs'
-                defaultMessage='{count, plural, one {Repost} other {Reposts}}'
-                values={{ count: status.reblogs_count }}
-              />
-            </Text>
-          </HStack>
+          <InteractionCounter count={status.reblogs_count}>
+            <FormattedMessage
+              id='status.interactions.reblogs'
+              defaultMessage='{count, plural, one {Repost} other {Reposts}}'
+              values={{ count: status.reblogs_count }}
+            />
+          </InteractionCounter>
         </button>
       );
     }
@@ -114,19 +108,13 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
             })
           }
         >
-          <HStack space={1} alignItems='center'>
-            <Text theme='primary' size='sm' weight='bold'>
-              <FormattedNumber value={status.favourites_count} />
-            </Text>
-
-            <Text theme='muted' size='sm'>
-              <FormattedMessage
-                id='status.interactions.favourites'
-                defaultMessage='{count, plural, one {Like} other {Likes}}'
-                values={{ count: status.favourites_count }}
-              />
-            </Text>
-          </HStack>
+          <InteractionCounter count={status.favourites_count}>
+            <FormattedMessage
+              id='status.interactions.favourites'
+              defaultMessage='{count, plural, one {Like} other {Likes}}'
+              values={{ count: status.favourites_count }}
+            />
+          </InteractionCounter>
         </button>
       );
     }
@@ -160,23 +148,19 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
           })
         }
       >
-        <HStack space={1} alignItems='center'>
-          <Text theme='primary' size='sm' weight='bold'>
-            <FormattedNumber value={count} />
-          </Text>
-
+        <InteractionCounter count={count}>
           <HStack space={0.5} alignItems='center'>
-            {emojiReacts.map((e, i) => {
+            {emojiReacts.take(3).map((e, i) => {
               return (
                 <Emoji
                   key={i}
-                  className={classNames('w-5 h-5 flex-none')}
+                  className='w-4.5 h-4.5 flex-none'
                   emoji={e.get('name')}
                 />
               );
             })}
           </HStack>
-        </HStack>
+        </InteractionCounter>
       </button>
     );
   };
@@ -190,4 +174,24 @@ const StatusInteractionBar: React.FC<IStatusInteractionBar> = ({ status }): JSX.
   );
 };
 
+interface IInteractionCounter {
+  count: number,
+  children: React.ReactNode,
+}
+
+/** InteractionCounter component. */
+const InteractionCounter: React.FC<IInteractionCounter> = ({ count, children }) => {
+  return (
+    <HStack space={1} alignItems='center'>
+      <Text theme='primary' weight='bold'>
+        <FormattedNumber value={count} />
+      </Text>
+
+      <Text tag='div' theme='muted'>
+        {children}
+      </Text>
+    </HStack>
+  );
+};
+
 export default StatusInteractionBar;
diff --git a/tailwind.config.js b/tailwind.config.js
index 7d562327b..1e2625c6f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,6 +42,9 @@ module.exports = {
           'mono',
         ],
       },
+      spacing: {
+        '4.5': '1.125rem',
+      },
       colors: parseColorMatrix({
         // Define color matrix (of available colors)
         // Colors are configured at runtime with CSS variables in soapbox.json