ProfileCard: FollowedBy, fix tab selector z-index

2023-11-29 14:25:14 +02:00
parent 3acb2d4d34
commit 51e68b1288
4 changed files with 60 additions and 46 deletions
--- a/packages/app/src/Element/User/FollowedBy.tsx
+++ b/packages/app/src/Element/User/FollowedBy.tsx
@ -0,0 +1,54 @@
+import FollowDistanceIndicator from "@/Element/User/FollowDistanceIndicator";
+import ProfileImage from "@/Element/User/ProfileImage";
+import { FormattedMessage } from "react-intl";
+import { Fragment } from "react";
+import { ProfileLink } from "@/Element/User/ProfileLink";
+import DisplayName from "@/Element/User/DisplayName";
+import { socialGraphInstance } from "@snort/system";
+
+const MAX_FOLLOWED_BY_FRIENDS = 3;
+
+export default function FollowedBy({ pubkey }: { pubkey: string }) {
+  const followedByFriends = socialGraphInstance.followedByFriends(pubkey);
+  const followedByFriendsArray = Array.from(followedByFriends).slice(0, MAX_FOLLOWED_BY_FRIENDS);
+  return (
+    <div className="flex flex-row items-center">
+      <div className="flex flex-row items-center">
+        <FollowDistanceIndicator className="p-2" pubkey={pubkey} />
+        {followedByFriendsArray.map((a, index) => {
+          const zIndex = followedByFriendsArray.length - index;
+
+          return (
+            <div className={`inline-block ${index > 0 ? "-ml-5" : ""}`} key={a} style={{ zIndex }}>
+              <ProfileImage showFollowDistance={false} pubkey={a} size={24} showUsername={false} />
+            </div>
+          );
+        })}
+      </div>
+      {followedByFriends.size > 0 && (
+        <div className="text-gray-light">
+          <span className="mr-1">
+            <FormattedMessage defaultMessage="Followed by" id="6mr8WU" />
+          </span>
+          {followedByFriendsArray.map((a, index) => (
+            <Fragment key={a}>
+              <ProfileLink pubkey={a} className="link inline">
+                <DisplayName user={undefined} pubkey={a} />
+              </ProfileLink>
+              {index < followedByFriendsArray.length - 1 && ","}{" "}
+            </Fragment>
+          ))}
+          {followedByFriends.size > MAX_FOLLOWED_BY_FRIENDS && (
+            <span>
+              <FormattedMessage
+                defaultMessage="and {count} others you follow"
+                id="CYkOCI"
+                values={{ count: followedByFriends.size - MAX_FOLLOWED_BY_FRIENDS }}
+              />
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}