so much stuff???

1 files changed, 56 insertions, 0 deletions

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
new file mode 100644
index 00000000..f59193d0
--- /dev/null
+++ b/apps/web/src/components/editor-header.tsx
@@ -0,0 +1,56 @@
+"use client";

+

+import Link from "next/link";

+import { Button } from "./ui/button";

+import { ChevronLeft, Download } from "lucide-react";

+import { useProjectStore } from "@/stores/project-store";

+import { useMediaStore } from "@/stores/media-store";

+import { useTimelineStore } from "@/stores/timeline-store";

+import { HeaderBase } from "./header-base";

+

+export function EditorHeader() {

+  const { activeProject } = useProjectStore();

+  const { mediaItems } = useMediaStore();

+  const { tracks } = useTimelineStore();

+

+  const handleExport = () => {

+    // TODO: Implement export functionality

+    console.log("Export project");

+  };

+

+  const leftContent = (

+    <Link

+      href="/"

+      className="font-medium tracking-tight flex items-center gap-2 hover:opacity-80 transition-opacity"

+    >

+      <ChevronLeft className="h-4 w-4" />

+      <span className="text-sm">{activeProject?.name || "Loading..."}</span>

+    </Link>

+  );

+

+  const centerContent = (

+    <div className="flex items-center gap-2 text-xs text-muted-foreground">

+      <span>{mediaItems.length} media</span>

+      <span>•</span>

+      <span>{tracks.length} tracks</span>

+    </div>

+  );

+

+  const rightContent = (

+    <nav className="flex items-center gap-2">

+      <Button size="sm" onClick={handleExport}>

+        <Download className="h-4 w-4" />

+        <span className="text-sm">Export</span>

+      </Button>

+    </nav>

+  );

+

+  return (

+    <HeaderBase

+      leftContent={leftContent}

+      centerContent={centerContent}

+      rightContent={rightContent}

+      className="bg-background border-b"

+    />

+  );

+}