106 lines
3.8 KiB
TypeScript
106 lines
3.8 KiB
TypeScript
import { Link } from "@tanstack/react-router";
|
|
import { LogOut, Menu, Monitor, Moon, Sun } from "lucide-react";
|
|
|
|
function TelegramIcon(props: { className?: string }) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
className={props.className}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
|
|
</svg>
|
|
);
|
|
}
|
|
import { Button } from "@/components/ui/button";
|
|
import { useAuth } from "@/lib/auth-context";
|
|
import { useSseStatus } from "@/lib/sse-context";
|
|
import { useTheme } from "@/lib/theme";
|
|
import { useTelegramStatus } from "@/lib/queries";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface HeaderProps {
|
|
onMenuClick: () => void;
|
|
}
|
|
|
|
export function Header({ onMenuClick }: HeaderProps) {
|
|
const sseStatus = useSseStatus();
|
|
const { theme, cycleTheme } = useTheme();
|
|
const auth = useAuth();
|
|
const { data: telegramStatus } = useTelegramStatus();
|
|
|
|
const ThemeIcon = theme === "light" ? Sun : theme === "dark" ? Moon : Monitor;
|
|
const themeLabel =
|
|
theme === "light" ? "Claro" : theme === "dark" ? "Oscuro" : "Sistema";
|
|
|
|
async function handleSignOut() {
|
|
await auth.signOut();
|
|
window.location.href = "/login";
|
|
}
|
|
|
|
return (
|
|
<header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background 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">
|
|
{auth.isAuthenticated && (
|
|
<>
|
|
<span className="hidden text-sm text-muted-foreground sm:inline">
|
|
{auth.session?.user.email}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={handleSignOut}
|
|
title="Cerrar sesión"
|
|
>
|
|
<LogOut className="size-4" />
|
|
</Button>
|
|
</>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={cycleTheme}
|
|
title={`Tema: ${themeLabel} (Cmd+D)`}
|
|
>
|
|
<ThemeIcon className="size-4" />
|
|
</Button>
|
|
<Link
|
|
to="/settings"
|
|
className={cn(
|
|
"inline-flex items-center justify-center rounded-md p-1.5 transition-colors",
|
|
telegramStatus?.connected
|
|
? "text-emerald-500 hover:text-emerald-400"
|
|
: "text-muted-foreground hover:text-foreground",
|
|
)}
|
|
title={telegramStatus?.connected ? "Telegram conectado" : "Conectar Telegram"}
|
|
>
|
|
<TelegramIcon className="size-4" />
|
|
</Link>
|
|
<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>
|
|
);
|
|
}
|