added frontend WS connection for demonstration purposes

1 files changed, 62 insertions, 0 deletions

diff --git a/gui/src/components/Avatar.tsx b/gui/src/components/Avatar.tsx
new file mode 100644
index 0000000..a071655
--- /dev/null
+++ b/gui/src/components/Avatar.tsx
@@ -0,0 +1,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>;
+}