Refactor NumberFields to standalone component (#38455)

app/javascript/mastodon/features/account_timeline/components/number_fields.tsx

@@ -3,7 +3,6 @@ import type { FC } from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
 
-import classNames from 'classnames';
 import { NavLink } from 'react-router-dom';
 
 import {
@@ -12,13 +11,15 @@ import {
   StatusesCounter,
 } from '@/mastodon/components/counters';
 import { FormattedDateWrapper } from '@/mastodon/components/formatted_date';
+import {
+  NumberFields,
+  NumberFieldsItem,
+} from '@/mastodon/components/number_fields';
 import { ShortNumber } from '@/mastodon/components/short_number';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 
 import { isRedesignEnabled } from '../common';
 
-import classes from './redesign.module.scss';
-
 const LegacyNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
   const intl = useIntl();
   const account = useAccount(accountId);
@@ -77,56 +78,51 @@ const RedesignNumberFields: FC<{ accountId: string }> = ({ accountId }) => {
   }
 
   return (
-    <ul
-      className={classNames(
-        'account__header__extra__links',
-        classes.fieldNumbersWrapper,
-      )}
-    >
-      <li>
-        <FormattedMessage id='account.posts' defaultMessage='Posts' />
-        <strong title={intl.formatNumber(account.statuses_count)}>
-          <ShortNumber value={account.statuses_count} />
-        </strong>
-      </li>
+    <NumberFields>
+      <NumberFieldsItem
+        label={<FormattedMessage id='account.posts' defaultMessage='Posts' />}
+        hint={intl.formatNumber(account.statuses_count)}
+      >
+        <ShortNumber value={account.statuses_count} />
+      </NumberFieldsItem>
 
-      <li>
-        <FormattedMessage id='account.followers' defaultMessage='Followers' />
-        <NavLink
-          exact
-          to={`/@${account.acct}/followers`}
-          title={intl.formatNumber(account.followers_count)}
-        >
-          <ShortNumber value={account.followers_count} />
-        </NavLink>
-      </li>
+      <NumberFieldsItem
+        label={
+          <FormattedMessage id='account.followers' defaultMessage='Followers' />
+        }
+        hint={intl.formatNumber(account.followers_count)}
+        link={`/@${account.acct}/followers`}
+      >
+        <ShortNumber value={account.followers_count} />
+      </NumberFieldsItem>
 
-      <li>
-        <FormattedMessage id='account.following' defaultMessage='Following' />
-        <NavLink
-          exact
-          to={`/@${account.acct}/following`}
-          title={intl.formatNumber(account.following_count)}
-        >
-          <ShortNumber value={account.following_count} />
-        </NavLink>
-      </li>
+      <NumberFieldsItem
+        label={
+          <FormattedMessage id='account.following' defaultMessage='Following' />
+        }
+        hint={intl.formatNumber(account.following_count)}
+        link={`/@${account.acct}/following`}
+      >
+        <ShortNumber value={account.following_count} />
+      </NumberFieldsItem>
 
-      <li>
-        <FormattedMessage id='account.joined_short' defaultMessage='Joined' />
-        <strong title={intl.formatDate(account.created_at)}>
-          {createdThisYear ? (
-            <FormattedDateWrapper
-              value={account.created_at}
-              month='short'
-              day='2-digit'
-            />
-          ) : (
-            <FormattedDateWrapper value={account.created_at} year='numeric' />
-          )}
-        </strong>
-      </li>
-    </ul>
+      <NumberFieldsItem
+        label={
+          <FormattedMessage id='account.joined_short' defaultMessage='Joined' />
+        }
+        hint={intl.formatDate(account.created_at)}
+      >
+        {createdThisYear ? (
+          <FormattedDateWrapper
+            value={account.created_at}
+            month='short'
+            day='2-digit'
+          />
+        ) : (
+          <FormattedDateWrapper value={account.created_at} year='numeric' />
+        )}
+      </NumberFieldsItem>
+    </NumberFields>
   );
 };
 

app/javascript/mastodon/features/account_timeline/components/redesign.module.scss

@@ -312,37 +312,6 @@ svg.badgeIcon {
   }
 }
 
-.fieldNumbersWrapper {
-  display: flex;
-  font-size: 13px;
-  padding: 0;
-  margin: 8px 0;
-  gap: 20px;
-
-  li {
-    @container (width < 420px) {
-      flex: 1 1 0px;
-    }
-  }
-
-  a,
-  strong {
-    display: block;
-    font-weight: 600;
-    color: var(--color-text-primary);
-    font-size: 15px;
-  }
-
-  a {
-    padding: 0;
-
-    &:hover,
-    &:focus {
-      text-decoration: underline;
-    }
-  }
-}
-
 .modalCloseButton {
   padding: 8px;
   border-radius: 50%;