55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
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>
|
|
);
|
|
}
|