so much stuff???

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"
+    />
+  );
+}