first commit

resources/client/profile/header/profile-stats-list.tsx

@@ -0,0 +1,79 @@
+import {User} from '@common/auth/user';
+import React, {
+  Children,
+  Fragment,
+  ReactElement,
+  ReactNode,
+  useContext,
+} from 'react';
+import {SiteConfigContext} from '@common/core/settings/site-config-context';
+import {Trans} from '@common/i18n/trans';
+import {Link} from 'react-router-dom';
+import {FormattedNumber} from '@common/i18n/formatted-number';
+
+interface Props {
+  user: User;
+}
+export function ProfileStatsList({user}: Props) {
+  const {
+    auth: {getUserProfileLink},
+  } = useContext(SiteConfigContext);
+  const profileLink = getUserProfileLink!(user);
+
+  return (
+    <StatsItems>
+      <StatsItem
+        label={<Trans message="Followers" />}
+        value={user.followers_count || 0}
+        link={`${profileLink}/followers`}
+      />
+      <StatsItem
+        label={<Trans message="Following" />}
+        value={user.followed_users_count || 0}
+        link={`${profileLink}/followed-users`}
+      />
+      <StatsItem
+        label={<Trans message="Lists" />}
+        value={user.lists_count || 0}
+        link={`${profileLink}/lists`}
+      />
+    </StatsItems>
+  );
+}
+
+interface StatsItemsProps {
+  children: ReactNode;
+}
+function StatsItems(props: StatsItemsProps) {
+  const children = Children.toArray(props.children);
+  return (
+    <div className="flex items-center">
+      {children.map((child, index) => (
+        <Fragment key={index}>
+          {child}
+          {index < children.length - 1 && (
+            <div className="mx-10 h-34 w-1 bg-divider" />
+          )}
+        </Fragment>
+      ))}
+    </div>
+  );
+}
+
+interface StatsItemProps {
+  label: ReactElement;
+  value: number;
+  link: string;
+}
+function StatsItem({label, value, link}: StatsItemProps) {
+  return (
+    <Link to={link} className="group block text-center">
+      <div className="text-lg font-bold">
+        <FormattedNumber value={value} />
+      </div>
+      <div className="text-xs uppercase text-muted transition-colors group-hover:text-primary">
+        {label}
+      </div>
+    </Link>
+  );
+}