first commit

resources/client/profile/follower-list-item.tsx

@@ -0,0 +1,37 @@
+import {User} from '@common/auth/user';
+import {Trans} from '@common/i18n/trans';
+import React from 'react';
+import {UserProfileLink} from '@common/users/user-profile-link';
+import {UserAvatar} from '@common/ui/images/user-avatar';
+import {FollowButton} from '@common/users/follow-button';
+
+interface Props {
+  follower: User;
+}
+export function FollowerListItem({follower}: Props) {
+  return (
+    <div
+      key={follower.id}
+      className="flex items-center gap-16 mb-16 pb-16 border-b"
+    >
+      <UserAvatar user={follower} size="lg" />
+      <div className="text-sm">
+        <UserProfileLink user={follower} />
+        {follower.followers_count && follower.followers_count > 0 ? (
+          <div className="text-xs text-muted">
+            <Trans
+              message="[one 1 followers|other :count followers]"
+              values={{count: follower.followers_count}}
+            />
+          </div>
+        ) : null}
+      </div>
+      <FollowButton
+        variant="outline"
+        size="xs"
+        className="ml-auto"
+        user={follower}
+      />
+    </div>
+  );
+}