42 lines
1.2 KiB
TypeScript
42 lines
1.2 KiB
TypeScript
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>
|
|
);
|
|
}
|