blob: 0f3dc901a0192cde708ca0707086778cf0e72d9e (
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
|
import useLocalState from "@/state/state";
import type { Ship } from "@/types/urbit";
import Sigil from "./Sigil";
import ShipModal from "./modals/ShipModal";
import { isValidPatp } from "urbit-ob";
import type { UserProfile } from "@/types/nostrill";
import Icon from "@/components/Icon";
export default function ({
p,
size,
color,
noClickOnName,
profile,
picOnly = false,
}: {
p: Ship;
size: number;
color?: string;
noClickOnName?: boolean;
profile?: UserProfile;
picOnly?: boolean;
}) {
const { setModal } = useLocalState((s) => ({ setModal: s.setModal }));
// TODO revisit this when %whom updates
const avatarInner = profile ? (
<img src={profile.picture} />
) : isValidPatp(p) ? (
<Sigil patp={p} 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(<ShipModal ship={p} />);
}
const name = (
<div className="name cp" role="link" onMouseUp={openModal}>
{profile ? (
<p>{profile.name}</p>
) : (
<p className={"p-only" + tooLong(p)}>{p.length > 28 ? "Anon" : p}</p>
)}
</div>
);
return <div className="ship-avatar">{name}</div>;
}
|
