refactor: move export button to component

2 files changed, 59 insertions, 40 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 6881c135..ee5dfc17 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -19,9 +19,8 @@ import { DeleteProjectDialog } from "./delete-project-dialog";
 import { useRouter } from "next/navigation";
 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";
+import { ExportButton } from "./export-button";
 
 export function EditorHeader() {
   const { activeProject, renameProject, deleteProject } = useProjectStore();
@@ -138,41 +137,3 @@ export function EditorHeader() {
     />
   );
 }
-
-function ExportButton() {
-  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);
-
-  const handleExport = () => {
-    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 (soon)</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>
-      </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>
-    </>
-  );
-}
diff --git a/apps/web/src/components/export-button.tsx b/apps/web/src/components/export-button.tsx
new file mode 100644
index 00000000..0e1c8774
--- /dev/null
+++ b/apps/web/src/components/export-button.tsx
@@ -0,0 +1,58 @@
+"use client";

+

+import { useState } from "react";

+import { TransitionUpIcon } from "./icons";

+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";

+

+export function ExportButton() {

+  const [isExportDialogOpen, setIsExportDialogOpen] = useState(false);

+

+  const handleExport = () => {

+    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 (soon)</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>

+      </button>

+      <ExportDialog

+        isOpen={isExportDialogOpen}

+        onOpenChange={setIsExportDialogOpen}

+      />

+    </>

+  );

+}

+

+function ExportDialog({

+  isOpen,

+  onOpenChange,

+}: {

+  isOpen: boolean;

+  onOpenChange: (open: boolean) => void;

+}) {

+  return (

+    <Dialog open={isOpen} onOpenChange={onOpenChange}>

+      <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>

+  );

+}