Refactor NumberFields to standalone component (#38455)

app/javascript/mastodon/components/number_fields/index.tsx

@@ -0,0 +1,40 @@
+import { NavLink } from 'react-router-dom';
+
+import type { MastodonLocationDescriptor } from 'mastodon/components/router';
+
+import classes from './styles.module.scss';
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+export const NumberFields: React.FC<WrapperProps> = ({ children }) => {
+  return <ul className={classes.list}>{children}</ul>;
+};
+
+interface ItemProps {
+  label: React.ReactNode;
+  hint?: string;
+  link?: MastodonLocationDescriptor;
+  children: React.ReactNode;
+}
+
+export const NumberFieldsItem: React.FC<ItemProps> = ({
+  label,
+  hint,
+  link,
+  children,
+}) => {
+  return (
+    <li className={classes.item} title={hint}>
+      {label}
+      {link ? (
+        <NavLink exact to={link}>
+          {children}
+        </NavLink>
+      ) : (
+        <strong>{children}</strong>
+      )}
+    </li>
+  );
+};

app/javascript/mastodon/components/number_fields/styles.module.scss

@@ -0,0 +1,32 @@
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 8px 0;
+  padding: 0;
+  gap: 4px 20px;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.item {
+  @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;
+    }
+  }
+}

app/javascript/mastodon/components/router.tsx

@@ -26,6 +26,8 @@ export type LocationState = MastodonLocationState | null | undefined;
 
 export type MastodonLocation = ReturnType<typeof useLocation<LocationState>>;
 
+export type MastodonLocationDescriptor = LocationDescriptor<LocationState>;
+
 type HistoryPath = Path | LocationDescriptor<LocationState>;
 
 export const browserHistory = createBrowserHistory<LocationState>();