Create frontend/src/components/AppHeader.jsx

frontend/src/components/AppHeader.jsx

@@ -0,0 +1,34 @@
+// frontend/src/components/AppHeader.jsx
+import React from "react";
+
+export default function AppHeader({ title, subtitle, right }) {
+  return (
+    <header className="border-b border-slate-200 bg-white/80 backdrop-blur">
+      <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3 min-w-0">
+          <img
+            src="/dojo-logo.png"
+            alt="Karate Dojo logo"
+            className="h-8 w-8 rounded-full border border-slate-200 object-contain bg-white"
+          />
+          <div className="min-w-0">
+            <div className="text-sm font-semibold tracking-tight truncate">
+              {title}
+            </div>
+            {subtitle && (
+              <div className="text-xs text-slate-500 truncate">
+                {subtitle}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {right && (
+          <div className="flex items-center gap-3 shrink-0">
+            {right}
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}