refactor: examples/

1 files changed, 73 insertions, 0 deletions

diff --git a/examples/with-script-in-browser/components/CustomFooter.tsx b/examples/with-script-in-browser/components/CustomFooter.tsx
new file mode 100644
index 0000000..72fd199
--- /dev/null
+++ b/examples/with-script-in-browser/components/CustomFooter.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import type * as TExcalidraw from "@excalidraw/excalidraw";
+import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
+
+const COMMENT_SVG = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    className="feather feather-message-circle"
+  >
+    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+  </svg>
+);
+
+const CustomFooter = ({
+  excalidrawAPI,
+  excalidrawLib,
+}: {
+  excalidrawAPI: ExcalidrawImperativeAPI;
+  excalidrawLib: typeof TExcalidraw;
+}) => {
+  const { Button, MIME_TYPES } = excalidrawLib;
+
+  return (
+    <>
+      <Button
+        onSelect={() => alert("General Kenobi!")}
+        style={{ marginLeft: "1rem", width: "auto" }}
+        title="Hello there!"
+      >
+        Hit me
+      </Button>
+      <Button
+        className="custom-element"
+        onSelect={() => {
+          excalidrawAPI?.setActiveTool({
+            type: "custom",
+            customType: "comment",
+          });
+          const url = `data:${MIME_TYPES.svg},${encodeURIComponent(
+            `<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-message-circle"
+  >
+    <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
+  </svg>`,
+          )}`;
+          excalidrawAPI?.setCursor(`url(${url}), auto`);
+        }}
+        title="Comments!"
+      >
+        {COMMENT_SVG}
+      </Button>
+    </>
+  );
+};
+
+export default CustomFooter;