feat: export notice dialog

apps/web/src/components/editor-header.tsx

@@ -21,6 +21,7 @@ import { FaDiscord } from "react-icons/fa6";
 import { useTheme } from "next-themes";
 import { TransitionUpIcon } from "./icons";
 import { PanelPresetSelector } from "./panel-preset-selector";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
 
 export function EditorHeader() {
   const { activeProject, renameProject, deleteProject } = useProjectStore();
@@ -139,14 +140,14 @@ export function EditorHeader() {
 }
 
 function ExportButton() {
+  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
+
   const handleExport = () => {
-    // TODO: Implement export functionality
-    // NOTE: This is already being worked on
-    console.log("Export project");
-    window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
+    setIsExportDialogOpen(true);
   };
 
   return (
+    <>
       <button
         className="flex items-center gap-1.5 bg-[#38BDF8] text-white rounded-md px-[0.12rem] py-[0.12rem] cursor-pointer hover:brightness-95 transition-all duration-200"
         onClick={handleExport}
@@ -159,5 +160,19 @@ function ExportButton() {
           </div>
         </div>
       </button>
+      <Dialog open={isExportDialogOpen} onOpenChange={setIsExportDialogOpen}>
+        <DialogContent className="p-6">
+          <DialogHeader>
+            <DialogTitle>Export Project</DialogTitle>
+          </DialogHeader>
+          <div>
+            <p className="text-muted-foreground">
+              Export functionality is not ready yet. We're currently working on
+              a custom pipeline to make this possible.
+            </p>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 }