import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Menu, Search } from 'lucide-react';
import { Button } from '@vertesia/ui/core';
import { useSidebarToggle } from './SidebarContext.js';
import { TitleBar } from './TitleBar.js';
export function Navbar({ children, logo, onSearch, title }) {
    return (_jsxs("div", { className: "sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b px-4 shadow-2xs sm:gap-x-6 sm:px-6 lg:px-8", children: [_jsx(HamburgerButton, {}), _jsx("div", { className: "lg:hidden", children: logo }), onSearch && _jsx(NavbarSeparator, { visible: 'mobile' }), _jsxs("div", { className: "flex flex-1 gap-x-4 self-stretch lg:gap-x-6", children: [_jsx(TitleBar, { title: title }), onSearch && _jsx(SearchBox, { onSearch: onSearch }), _jsx("div", { className: "flex items-center gap-x-4 lg:gap-x-6 ml-auto", children: children })] })] }));
}
function SearchBox({}) {
    return (_jsxs("form", { className: "relative flex flex-1", action: "#", method: "GET", children: [_jsx("label", { htmlFor: "search-field", className: "sr-only", children: "Search" }), _jsx(Search, { className: "pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400", "aria-hidden": "true" }), _jsx("input", { id: "search-field", className: "block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm", placeholder: "Search...", type: "search", name: "search" })] }));
}
export function HamburgerButton() {
    const { toggleDesktop, toggleMobile } = useSidebarToggle();
    const toggle = () => {
        if (window.innerWidth < 1024) {
            toggleMobile();
        }
        else {
            toggleDesktop();
        }
    };
    return (_jsx(_Fragment, { children: _jsx(Button, { variant: 'ghost', size: 'icon', onClick: () => toggle(), className: "p-2 rounded-full transition-colors w-full text-center ", children: _jsx(Menu, { "aria-hidden": "true", size: 24 }) }) }));
}
export function NavbarSeparator({ visible }) {
    let visibility = "";
    if (visible) {
        visibility = visible === "mobile" ? "lg:hidden" : "hidden lg:block";
    }
    return (_jsx("div", { className: `h-6 w-px bg-gray-900/10 dark:bg-slate-900/0.1 ${visibility}`, "aria-hidden": "true" }));
}
export function NavbarIconButton({ title, icon: Icon, onClick }) {
    return (_jsxs("button", { type: "button", className: "-m-2.5 p-2.5 text-gray-400 dark:text-slate-50 hover:text-gray-500", onClick: onClick, children: [_jsx("span", { className: "sr-only", children: title }), _jsx(Icon, { className: "size-6", "aria-hidden": "true", title: title })] }));
}
export function NavbarButton({ children, onClick }) {
    return (_jsx(Button, { onClick: onClick, children: children }));
}
export function NavbarLink({ href, onClick, children }) {
    return (_jsx("a", { className: "dark:text-slate-50", href: href, onClick: onClick, children: children }));
}
//# sourceMappingURL=Navbar.js.map