1 files changed, 45 insertions, 0 deletions
diff --git a/front/src/components/modals/ShipModal.tsx b/front/src/components/modals/ShipModal.tsx
new file mode 100644
index 0000000..86bffbb
--- /dev/null
+++ b/front/src/components/modals/ShipModal.tsx
@@ -0,0 +1,45 @@
+import type { Ship } from "@/types/urbit";
+import Modal from "./Modal";
+import Avatar from "../Avatar";
+import copyIcon from "@/assets/icons/copy.svg";
+import useLocalState from "@/state/state";
+import { useLocation } from "wouter";
+import toast from "react-hot-toast";
+
+export default function ({ ship }: { ship: Ship }) {
+  const { setModal, api } = useLocalState();
+  const [_, navigate] = useLocation();
+  function close() {
+    setModal(null);
+  }
+  async function copy(e: React.MouseEvent) {
+    e.stopPropagation();
+    await navigator.clipboard.writeText(ship);
+    toast.success("Copied to clipboard");
+  }
+  return (
+    <Modal close={close}>
+      <div id="ship-modal">
+        <div className="flex">
+          <Avatar p={ship} size={60} />
+          <img
+            className="copy-icon cp"
+            role="link"
+            onClick={copy}
+            src={copyIcon}
+            alt=""
+          />
+        </div>
+        <div className="buttons f1">
+          <button onClick={() => navigate(`/feed/${ship}`)}>Feed</button>
+          <button onClick={() => navigate(`/pals/${ship}`)}>Profile</button>
+          {ship !== api!.airlock.our && (
+            <>
+              <button onClick={() => navigate(`/chat/dm/${ship}`)}>DM</button>
+            </>
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+}