feat: added deploy button

frontend/components/editor/navbar/deploy.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Play, Pause } from "lucide-react";
+
+export default function DeployButtonModal() {
+  const [isDeploying, setIsDeploying] = useState(false);
+
+  const handleDeploy = () => {
+    if (isDeploying) {
+      console.log("Stopping deployment...");
+
+    } else {
+      console.log("Starting deployment...");
+    }
+    setIsDeploying(!isDeploying);
+  };
+
+  return (
+    <>
+      <Button variant="outline" onClick={handleDeploy}>
+        {isDeploying ? <Pause className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
+        {isDeploying ? "Deployed" : "Deploy"}
+      </Button>
+    </>
+  );
+}

frontend/components/editor/navbar/index.tsx

@@ -11,6 +11,7 @@ import { useState } from "react";
 import EditSandboxModal from "./edit";
 import ShareSandboxModal from "./share";
 import { Avatars } from "../live/avatars";
+import DeployButtonModal from "./deploy";
 
 export default function Navbar({
   userData,
@@ -66,10 +67,13 @@ export default function Navbar({
           <Avatars />
 
           {isOwner ? (
+            <>
+              <DeployButtonModal />
               <Button variant="outline" onClick={() => setIsShareOpen(true)}>
                 <Users className="w-4 h-4 mr-2" />
                 Share
               </Button>
+            </>
           ) : null}
           <UserButton userData={userData} />
         </div>