StatusInteractionBar: break into InteractionCounter component

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'> {

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;

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