feat/ui: deploy button popover

frontend/components/editor/navbar/deploy.tsx

@@ -3,30 +3,76 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { useTerminal } from "@/context/TerminalContext";
-import { Play, Pause } from "lucide-react";
+import { Play, Pause, Globe, Globe2 } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Sandbox, User } from "@/lib/types";
 
-export default function DeployButtonModal() {
+export default function DeployButtonModal({
+  userData,
+  data,
+}: {
+  userData: User;
+  data: Sandbox;
+}) {
   const { deploy } = useTerminal();
   const [isDeploying, setIsDeploying] = useState(false);
 
   const handleDeploy = () => {
     if (isDeploying) {
       console.log("Stopping deployment...");
+      setIsDeploying(false);
     } else {
       console.log("Starting deployment...");
       setIsDeploying(true);
-      deploy(() => {
-        setIsDeploying(false);
-      });
+      // deploy(() => {
+      //   setIsDeploying(false);
+      // });
     }
   };
 
   return (
     <>
-      <Button variant="outline" onClick={handleDeploy}>
-        {isDeploying ? <Pause className="w-4 h-4 mr-2" /> : <Play className="w-4 h-4 mr-2" />}
-        {isDeploying ? "Deploying" : "Deploy"}
-      </Button>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline">
+            <Globe className="w-4 h-4 mr-2" />
+            Deploy
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="p-4 w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl rounded-lg shadow-lg" style={{ backgroundColor: 'rgb(10,10,10)', color: 'white' }}>
+          <h3 className="font-semibold text-gray-300 mb-2">Domains</h3>
+          <div className="flex flex-col gap-4">
+            <DeploymentOption
+              icon={<Globe className="text-gray-500 w-5 h-5" />}
+              domain={`${data.id}.gitwit.app`}
+              timestamp="Deployed 1h ago"
+              user={userData.name}
+            />
+          </div>
+          <Button variant="outline" className="mt-4 w-full bg-[#0a0a0a] text-white hover:bg-[#262626]" onClick={handleDeploy}>
+          {isDeploying ? "Deploying..." : "Update"}
+          </Button>
+        </PopoverContent>
+      </Popover>
     </>
   );
-}
+}
+
+function DeploymentOption({ icon, domain, timestamp, user }: { icon: React.ReactNode; domain: string; timestamp: string; user: string }) {
+  return (
+    <div className="flex flex-col gap-2 w-full text-left p-2 rounded-md border border-gray-700 bg-gray-900">
+      <div className="flex items-start gap-2 relative">
+        <div className="flex-shrink-0">{icon}</div>
+        <a
+          href={`https://${domain}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-semibold text-gray-300 hover:underline"
+        >
+          {domain}
+        </a>
+      </div>
+      <p className="text-sm text-gray-400 mt-0 ml-7">{timestamp} • {user}</p>
+    </div>
+  );
+}

frontend/components/editor/navbar/index.tsx

@@ -71,7 +71,10 @@ export default function Navbar({
 
           {isOwner ? (
             <>
-            <DeployButtonModal />
+            <DeployButtonModal 
+            data={sandboxData}
+            userData={userData}
+            />
             <Button variant="outline" onClick={() => setIsShareOpen(true)}>
               <Users className="w-4 h-4 mr-2" />
               Share

frontend/components/ui/popover.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverAnchor = PopoverPrimitive.Anchor
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }