Share Canvas Option in Top Zone

near-everything · Apr 21, 2024 · bc81237 · bc81237
1 parent 6e80696
commit bc81237
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/apps/canvas/widget/tldraw/TopZone.jsx b/apps/canvas/widget/tldraw/TopZone.jsx
@@ -4,8 +4,15 @@ const parts = path.split("/");
 const creatorId = parts[0];
 const thingId = parts[2];
 
+const Button = styled.button`
+  background: transparent;
+  width: 24px;
+  height: 24px;
+  border: none;
+`;
+
 return (
-  <div className="styled-top-bar">
+  <div className="styled-top-bar d-flex align-items-center">
     <Widget
       src="mob.near/widget/N.ProfileLine"
       props={{
@@ -15,5 +22,19 @@ return (
       }}
     />
     {"/" + thingId}
+    <OverlayTrigger
+      placement="auto"
+      overlay={<Tooltip>{"Copy to clipboard"}</Tooltip>}
+    >
+      <Button
+        onClick={() =>
+          clipboard.writeText(
+            `https://draw.everything.dev/${context.accountId}${props.location.search}`
+          )
+        }
+      >
+        <i className="bi bi-share"></i>
+      </Button>
+    </OverlayTrigger>
   </div>
 );
diff --git a/src/components/custom/tldraw/TopZone.js b/src/components/custom/tldraw/TopZone.js
@@ -1,16 +1,18 @@
 import { Widget } from "near-social-vm";
 import React from "react";
 import { useBosLoaderStore } from "../../../stores/bos-loader";
+import { useLocation } from "react-router-dom";
 
 function TopZone({ path }) {
   const redirectMapStore = useBosLoaderStore();
+  const location = useLocation();
 
   return (
     <>
       <Widget
         key={`${path}-topzone`}
         src="everycanvas.near/widget/tldraw.TopZone"
-        props={{ path: path }}
+        props={{ path: path, location: location }}
         config={{
           redirectMap: redirectMapStore.redirectMap,
         }}