ProfileCard: FollowedBy, fix tab selector z-index
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
This commit is contained in:
parent
3acb2d4d34
commit
51e68b1288
54
packages/app/src/Element/User/FollowedBy.tsx
Normal file
54
packages/app/src/Element/User/FollowedBy.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
@ -9,6 +9,7 @@ import { UserWebsiteLink } from "./UserWebsiteLink";
|
|||||||
import Text from "@/Element/Text";
|
import Text from "@/Element/Text";
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import useLogin from "../../Hooks/useLogin";
|
import useLogin from "../../Hooks/useLogin";
|
||||||
|
import FollowedBy from "@/Element/User/FollowedBy";
|
||||||
|
|
||||||
export function ProfileCard({
|
export function ProfileCard({
|
||||||
pubkey,
|
pubkey,
|
||||||
@ -68,6 +69,7 @@ export function ProfileCard({
|
|||||||
truncate={250}
|
truncate={250}
|
||||||
/>
|
/>
|
||||||
<UserWebsiteLink user={user} />
|
<UserWebsiteLink user={user} />
|
||||||
|
<FollowedBy pubkey={pubkey} />
|
||||||
</div>
|
</div>
|
||||||
</ControlledMenu>
|
</ControlledMenu>
|
||||||
);
|
);
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import "./ProfilePage.css";
|
import "./ProfilePage.css";
|
||||||
import { Fragment, useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { FormattedMessage } from "react-intl";
|
import { FormattedMessage } from "react-intl";
|
||||||
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
import { useLocation, useNavigate, useParams } from "react-router-dom";
|
||||||
import {
|
import {
|
||||||
@ -9,7 +9,6 @@ import {
|
|||||||
MetadataCache,
|
MetadataCache,
|
||||||
NostrLink,
|
NostrLink,
|
||||||
NostrPrefix,
|
NostrPrefix,
|
||||||
socialGraphInstance,
|
|
||||||
TLVEntryType,
|
TLVEntryType,
|
||||||
tryParseNostrLink,
|
tryParseNostrLink,
|
||||||
} from "@snort/system";
|
} from "@snort/system";
|
||||||
@ -60,8 +59,7 @@ import { UserWebsiteLink } from "@/Element/User/UserWebsiteLink";
|
|||||||
import { useMuteList, usePinList } from "@/Hooks/useLists";
|
import { useMuteList, usePinList } from "@/Hooks/useLists";
|
||||||
|
|
||||||
import messages from "../messages";
|
import messages from "../messages";
|
||||||
import FollowDistanceIndicator from "@/Element/User/FollowDistanceIndicator";
|
import FollowedBy from "@/Element/User/FollowedBy";
|
||||||
import { ProfileLink } from "@/Element/User/ProfileLink";
|
|
||||||
|
|
||||||
interface ProfilePageProps {
|
interface ProfilePageProps {
|
||||||
id?: string;
|
id?: string;
|
||||||
@ -154,9 +152,6 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function username() {
|
function username() {
|
||||||
const followedByFriends = user?.pubkey ? socialGraphInstance.followedByFriends(user.pubkey) : new Set<string>();
|
|
||||||
const MAX_FOLLOWED_BY_FRIENDS = 3;
|
|
||||||
const followedByFriendsArray = Array.from(followedByFriends).slice(0, MAX_FOLLOWED_BY_FRIENDS);
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="flex flex-col g4">
|
<div className="flex flex-col g4">
|
||||||
@ -165,44 +160,7 @@ export default function ProfilePage({ id: propId, state }: ProfilePageProps) {
|
|||||||
<FollowsYou followsMe={follows.includes(loginPubKey ?? "")} />
|
<FollowsYou followsMe={follows.includes(loginPubKey ?? "")} />
|
||||||
</h2>
|
</h2>
|
||||||
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
{user?.nip05 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
||||||
<div className="flex flex-row items-center">
|
{user?.pubkey && <FollowedBy pubkey={user.pubkey} />}
|
||||||
<div className="flex flex-row items-center">
|
|
||||||
{user?.pubkey && <FollowDistanceIndicator className="p-2" pubkey={user.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>
|
|
||||||
</div>
|
</div>
|
||||||
{showBadges && <BadgeList badges={badges} />}
|
{showBadges && <BadgeList badges={badges} />}
|
||||||
{showStatus && <>{musicStatus()}</>}
|
{showStatus && <>{musicStatus()}</>}
|
||||||
|
@ -31,7 +31,7 @@ interface RelayOption {
|
|||||||
export default function RootPage() {
|
export default function RootPage() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="main-content p sticky top-0">
|
<div className="main-content p">
|
||||||
<RootTabs base="" />
|
<RootTabs base="" />
|
||||||
</div>
|
</div>
|
||||||
<div className="main-content">
|
<div className="main-content">
|
||||||
|
Loading…
Reference in New Issue
Block a user