From 478a332a2e6f0067d6eafa21a3fec4070fc8bf3a Mon Sep 17 00:00:00 2001
From: Akhilesh Rangani <akhileshrangani4@gmail.com>
Date: Wed, 17 Jul 2024 11:30:45 -0400
Subject: [PATCH] feat: added deploy button

---
 frontend/components/editor/navbar/deploy.tsx | 28 ++++++++++++++++++++
 frontend/components/editor/navbar/index.tsx  | 12 ++++++---
 2 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 frontend/components/editor/navbar/deploy.tsx

diff --git a/frontend/components/editor/navbar/deploy.tsx b/frontend/components/editor/navbar/deploy.tsx
new file mode 100644
index 0000000..b40ec20
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/frontend/components/editor/navbar/index.tsx b/frontend/components/editor/navbar/index.tsx
index 413200b..9c4a123 100644
--- a/frontend/components/editor/navbar/index.tsx
+++ b/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 ? (
-            <Button variant="outline" onClick={() => setIsShareOpen(true)}>
-              <Users className="w-4 h-4 mr-2" />
-              Share
-            </Button>
+            <>
+              <DeployButtonModal />
+              <Button variant="outline" onClick={() => setIsShareOpen(true)}>
+                <Users className="w-4 h-4 mr-2" />
+                Share
+              </Button>
+            </>
           ) : null}
           <UserButton userData={userData} />
         </div>