From f4e127f2d4fb8e50555be0104f7a5844fb0e2aa3 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Fri, 15 Aug 2025 23:44:19 +0200
Subject: [PATCH] feat: export notice dialog

---
 apps/web/src/components/editor-header.tsx | 45 +++++++++++++++--------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 88deaf0c..bb72f1e1 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/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,25 +140,39 @@ 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}
-    >
-      <div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
-        <TransitionUpIcon className="z-50" />
-        <span className="text-[0.875rem] z-50">Export</span>
-        <div className="absolute w-full h-full left-0 top-0 bg-linear-to-t from-white/0 to-white/50 z-10 rounded-[0.8rem] flex items-center justify-center">
-          <div className="absolute w-[calc(100%-2px)] h-[calc(100%-2px)] top-[0.08rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-[0.8rem]"></div>
+    <>
+      <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}
+      >
+        <div className="flex items-center gap-1.5 bg-linear-270 from-[#2567EC] to-[#37B6F7] rounded-[0.8rem] px-4 py-1 relative shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
+          <TransitionUpIcon className="z-50" />
+          <span className="text-[0.875rem] z-50">Export</span>
+          <div className="absolute w-full h-full left-0 top-0 bg-linear-to-t from-white/0 to-white/50 z-10 rounded-[0.8rem] flex items-center justify-center">
+            <div className="absolute w-[calc(100%-2px)] h-[calc(100%-2px)] top-[0.08rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] z-50 rounded-[0.8rem]"></div>
+          </div>
         </div>
-      </div>
-    </button>
+      </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>
+    </>
   );
 }