blob: a07165504acb4565b462558659a09bd40a8e6aba (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
import useLocalState from "@/state/state";
import Sigil from "./Sigil";
import { isValidPatp } from "urbit-ob";
import type { UserProfile, UserType } from "@/types/nostrill";
import Icon from "@/components/Icon";
import UserModal from "./modals/UserModal";
export default function ({
user,
userString,
size,
color,
noClickOnName,
profile,
picOnly = false,
}: {
user: UserType;
userString: string;
size: number;
color?: string;
noClickOnName?: boolean;
profile?: UserProfile;
picOnly?: boolean;
}) {
const { setModal } = useLocalState((s) => ({ setModal: s.setModal }));
// TODO revisit this when %whom updates
console.log({ profile });
const avatarInner = profile ? (
<img src={profile.picture} width={size} height={size} />
) : "urbit" in user && isValidPatp(user.urbit) ? (
<Sigil patp={user.urbit} size={size} bg={color} />
) : (
<Icon name="comet" />
);
const avatar = (
<div className="avatar cp" onClick={openModal}>
{avatarInner}
</div>
);
if (picOnly) return avatar;
const tooLong = (s: string) => (s.length > 15 ? " too-long" : "");
function openModal(e: React.MouseEvent) {
if (noClickOnName) return;
e.stopPropagation();
setModal(<UserModal user={user} userString={userString} />);
}
const name = (
<div className="name cp" role="link" onMouseUp={openModal}>
{profile ? (
<p>{profile.name}</p>
) : "urbit" in user ? (
<p className={"p-only" + tooLong(user.urbit)}>
{user.urbit.length > 28 ? "Anon" : user.urbit}
</p>
) : (
<p className={"p-only" + tooLong(user.nostr)}>{user.nostr}</p>
)}
</div>
);
return <div className="ship-avatar">{name}</div>;
}
|
