"use client"; import NotificationMenu from "./NotificationMenu"; import { useEffect, useRef, useState, useTransition } from "react"; import Link from "next/link"; import { Avatar, Button, Dropdown, Label } from "@heroui/react"; import { ArrowUpRightFromSquare, ChevronDown, Menu, MessageSquare, Search } from "lucide-react"; import type { Session } from "next-auth"; import { logoutAction } from "@/app/actions/auth"; import { formatDisplayName } from "@/lib/format-display"; import { dashboardNavigation } from "@/lib/dashboard-navigation"; import ThemeToggle from "@/components/ui/ThemeToggle"; import { useSystemNotifications } from "@/components/ui/SystemNotifications"; type DashboardHeaderProps = { user: Session["user"]; menuOpen: boolean; onOpenMenu: () => void; aula?: { id: number; nombre: string; clave: string }; }; export default function DashboardHeader({ user, menuOpen, onOpenMenu, aula, }: DashboardHeaderProps) { const [pending, startTransition] = useTransition(); const [searchOpen, setSearchOpen] = useState(false); const header = useRef(null); const mobileSearch = useRef(null); const { clearNotifications } = useSystemNotifications(); const name = formatDisplayName(user.name?.trim() || "Usuario"); const initials = name .split(/\s+/) .slice(0, 2) .map((part) => part[0]) .join("") .toUpperCase(); useEffect(() => { const el = header.current; if (!el) return; const observer = new ResizeObserver((entries) => document.documentElement.style.setProperty( "--system-header-height", `${entries[0].borderBoxSize[0]?.blockSize ?? el.getBoundingClientRect().height}px`, ), ); observer.observe(el); return () => { observer.disconnect(); document.documentElement.style.removeProperty("--system-header-height"); }; }, []); useEffect(() => { if (searchOpen) mobileSearch.current?.focus(); }, [searchOpen]); return (
); }