initial commit

apps/frontend/src/components/layout/Header.tsx

@@ -0,0 +1,41 @@
+import { Menu } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useSseStatus } from "@/lib/sse-context";
+import { cn } from "@/lib/utils";
+
+interface HeaderProps {
+  onMenuClick: () => void;
+}
+
+export function Header({ onMenuClick }: HeaderProps) {
+  const sseStatus = useSseStatus();
+
+  return (
+    <header className="flex h-14 items-center gap-4 border-b px-4">
+      <Button
+        variant="ghost"
+        size="icon"
+        className="md:hidden"
+        onClick={onMenuClick}
+      >
+        <Menu className="size-5" />
+      </Button>
+      <div className="flex-1" />
+      <div className="flex items-center gap-1.5">
+        <span
+          className={cn(
+            "size-2 rounded-full",
+            sseStatus === "connected" && "bg-emerald-500",
+            sseStatus === "connecting" && "bg-amber-500 animate-pulse",
+            sseStatus === "disconnected" && "bg-red-500",
+          )}
+        />
+        <span className="text-xs text-muted-foreground">
+          {sseStatus === "connected" && "Live"}
+          {sseStatus === "connecting" && "Conectando..."}
+          {sseStatus === "disconnected" && "Desconectado"}
+        </span>
+      </div>
+    </header>
+  );
+}