1 files changed, 59 insertions, 0 deletions
diff --git a/front/src/components/Avatar.tsx b/front/src/components/Avatar.tsx
new file mode 100644
index 0000000..35b4386
--- /dev/null
+++ b/front/src/components/Avatar.tsx
@@ -0,0 +1,59 @@
+import useLocalState from "@/state/state";
+import type { Ship } from "@/types/urbit";
+import Sigil from "./Sigil";
+import ShipModal from "./modals/ShipModal";
+
+export default function ({
+  p,
+  size,
+  color,
+  noClickOnName,
+}: {
+  p: Ship;
+  size: number;
+  color?: string;
+  noClickOnName?: boolean;
+}) {
+  const { setModal } = useLocalState();
+  // TODO revisit this when %whom updates
+  const avatar = (
+    <div className="avatar-w sigil cp" role="link" onClick={openModal}>
+      <Sigil patp={p} size={size} color={color} />
+    </div>
+  );
+  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}>
+      <p className={"p-only" + tooLong(p)}>{p.length > 28 ? "Anon" : p}</p>
+    </div>
+  );
+  return (
+    <div className="ship-avatar">
+      {avatar}
+      {name}
+    </div>
+  );
+}
+
+export function SigilOnly({ p, size, color }: any) {
+  const { setModal } = useLocalState();
+  function openModal(e: React.MouseEvent) {
+    e.stopPropagation();
+    setModal(<ShipModal ship={p} />);
+  }
+  return (
+    <div
+      className="avatar-w sigil cp"
+      role="link"
+      onClick={openModal}
+      onMouseUp={openModal}
+    >
+      <Sigil patp={p} size={size} color={color} />
+    </div>
+  );
+}