1 files changed, 65 insertions, 0 deletions
diff --git a/front/src/components/modals/UserModal.tsx b/front/src/components/modals/UserModal.tsx
new file mode 100644
index 0000000..6e3089d
--- /dev/null
+++ b/front/src/components/modals/UserModal.tsx
@@ -0,0 +1,65 @@
+import Modal from "./Modal";
+import Avatar from "../Avatar";
+import Icon from "@/components/Icon";
+import useLocalState from "@/state/state";
+import { useLocation } from "wouter";
+import toast from "react-hot-toast";
+import type { UserType } from "@/types/nostrill";
+
+export default function ({
+  user,
+  userString,
+}: {
+  user: UserType;
+  userString: string;
+}) {
+  const { setModal, api, pubkey } = useLocalState((s) => ({
+    setModal: s.setModal,
+    api: s.api,
+    pubkey: s.pubkey,
+  }));
+  const [_, navigate] = useLocation();
+  function close() {
+    setModal(null);
+  }
+  const itsMe =
+    "urbit" in user
+      ? user.urbit === api?.airlock.our
+      : "nostr" in user
+        ? user.nostr === pubkey
+        : false;
+  async function copy(e: React.MouseEvent) {
+    e.stopPropagation();
+    await navigator.clipboard.writeText(userString);
+    toast.success("Copied to clipboard");
+  }
+  return (
+    <Modal close={close}>
+      <div id="ship-modal">
+        <div className="flex">
+          <Avatar user={user} userString={userString} size={60} />
+          <Icon
+            name="copy"
+            size={20}
+            className="copy-icon cp"
+            onClick={copy}
+            title="Copy ship name"
+          />
+        </div>
+        <div className="buttons f1">
+          <button onClick={() => navigate(`/feed/${userString}`)}>Feed</button>
+          <button onClick={() => navigate(`/pals/${userString}`)}>
+            Profile
+          </button>
+          {itsMe && (
+            <>
+              <button onClick={() => navigate(`/chat/dm/${userString}`)}>
+                DM
+              </button>
+            </>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+}