add makereal button

Octoframes · Jan 22, 2024 · 5f4cd90 · 5f4cd90
1 parent 7014cd3
commit 5f4cd90
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 52 deletions.
diff --git a/src/App.css b/src/App.css
@@ -1,42 +1,26 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+/* custom.css */
+.tlui-debug-panel {
+  display: none;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+.tlui-toolbar__extras {
+  display: none;
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.tlui-menu-zone {
+  display: none;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.tlui-navigation-zone {
+  display: none;
 }
 
-.card {
-  padding: 2em;
+.tlui-help-menu {
+  display: none;
 }
 
-.read-the-docs {
-  color: #888;
-}
+
+
+.tlui-layout__top__right {
+  transform: translateY(60px);
+}
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,32 @@
 import { Tldraw } from "@tldraw/tldraw";
 import "@tldraw/tldraw/tldraw.css";
+import "./App.css";
+
+function MakeReal() {
+  return (
+    <button
+      style={{
+        position: "absolute",
+        zIndex: 1000,
+        right: 10,
+        top: 10,
+        backgroundColor: "#007bff", // Bootstrap primary blue
+        color: "white",
+        padding: "10px 20px",
+        border: "none",
+        borderRadius: "5px",
+        fontSize: "16px",
+        cursor: "pointer",
+        outline: "none",
+      }}
+      onClick={async () => {
+        console.log("Hello World");
+      }}
+    >
+      Make Real
+    </button>
+  );
+}
 
 export default function App() {
   return (
@@ -12,28 +39,34 @@ export default function App() {
         width: "100vw",
         height: "100vh",
         padding: "20px", // Adds some padding inside the container
-        gap: "20px" // Reduces space between canvas and iframe
+        gap: "20px", // Reduces space between canvas and iframe
       }}
     >
       {/* Tldraw Component */}
-      <div style={{
-        width: "40%",
-        height: "80%",
-        border: "10px solid #ADD8E6", // Light blue border
-        borderRadius: "10px", // Rounded corners
-        overflow: "hidden", // Ensures nothing spills out of the border radius
-      }}>
-        <Tldraw />
+      <div
+        style={{
+          width: "40%",
+          height: "80%",
+          border: "10px solid #ADD8E6", // Light blue border
+          borderRadius: "10px", // Rounded corners
+          overflow: "hidden", // Ensures nothing spills out of the border radius
+        }}
+      >
+        <Tldraw>
+          <MakeReal />
+        </Tldraw>
       </div>
 
       {/* Iframe Component */}
-      <div style={{
-        width: "40%",
-        height: "80%",
-        border: "10px solid #ADD8E6", // Light blue border
-        borderRadius: "10px", // Rounded corners
-        overflow: "hidden", // Ensures nothing spills out of the border radius
-      }}>
+      <div
+        style={{
+          width: "40%",
+          height: "80%",
+          border: "10px solid #ADD8E6", // Light blue border
+          borderRadius: "10px", // Rounded corners
+          overflow: "hidden", // Ensures nothing spills out of the border radius
+        }}
+      >
         <iframe
           src="https://jupyterlite.github.io/xeus-python-demo/repl"
           style={{ width: "100%", height: "100%", border: "none" }} // Removes the default border of iframe
@@ -43,7 +76,3 @@ export default function App() {
     </div>
   );
 }
-
-
-
-