{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "app-header",
  "dependencies": [
    "@inertiajs/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "navigation-menu",
    "sheet",
    "dropdown-menu",
    "avatar",
    "tooltip",
    "@craft/app-logo",
    "@craft/app-logo-icon",
    "@craft/breadcrumbs",
    "@craft/user-menu-content",
    "@craft/use-initials",
    "@craft/use-current-url"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/components/app-header.tsx",
      "content": "import { Link, usePage } from \"@inertiajs/react\";\nimport { BookOpen, Folder, LayoutGrid, Menu, Search } from \"lucide-react\";\nimport AppLogo from \"@/components/app-logo\";\nimport AppLogoIcon from \"@/components/app-logo-icon\";\nimport { Breadcrumbs } from \"@/components/breadcrumbs\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n    DropdownMenu,\n    DropdownMenuContent,\n    DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport {\n    NavigationMenu,\n    NavigationMenuItem,\n    NavigationMenuList,\n    navigationMenuTriggerStyle,\n} from \"@/components/ui/navigation-menu\";\nimport { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from \"@/components/ui/sheet\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\";\nimport { UserMenuContent } from \"@/components/user-menu-content\";\nimport { useCurrentUrl } from \"@/hooks/use-current-url\";\nimport { useInitials } from \"@/hooks/use-initials\";\nimport { cn, toUrl } from \"@/lib/utils\";\nimport type { Auth, BreadcrumbItem, NavItem } from \"@/lib/types\";\n\ntype Props = {\n    breadcrumbs?: BreadcrumbItem[];\n};\n\nconst mainNavItems: NavItem[] = [\n    {\n        title: \"Dashboard\",\n        href: \"/\",\n        icon: LayoutGrid,\n    },\n];\n\nconst rightNavItems: NavItem[] = [\n    {\n        title: \"Repository\",\n        href: \"https://github.com/laravel/react-starter-kit\",\n        icon: Folder,\n    },\n    {\n        title: \"Documentation\",\n        href: \"https://laravel.com/docs/starter-kits#react\",\n        icon: BookOpen,\n    },\n];\n\nconst activeItemStyles = \"text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100\";\n\nexport function AppHeader({ breadcrumbs = [] }: Props) {\n    const page = usePage<{ auth?: Auth }>();\n    const { auth } = page.props;\n    const user = auth?.user;\n    const getInitials = useInitials();\n    const { isCurrentUrl, whenCurrentUrl } = useCurrentUrl();\n\n    return (\n        <>\n            <div className=\"border-b border-sidebar-border/80\">\n                <div className=\"mx-auto flex h-16 items-center px-4 md:max-w-7xl\">\n                    {/* Mobile Menu */}\n                    <div className=\"lg:hidden\">\n                        <Sheet>\n                            <SheetTrigger\n                                render={\n                                    <Button\n                                        variant=\"ghost\"\n                                        size=\"icon\"\n                                        className=\"mr-2 h-[34px] w-[34px]\"\n                                    />\n                                }\n                            >\n                                <Menu className=\"h-5 w-5\" />\n                            </SheetTrigger>\n                            <SheetContent\n                                side=\"left\"\n                                className=\"flex h-full w-64 flex-col items-stretch justify-between bg-sidebar\"\n                            >\n                                <SheetTitle className=\"sr-only\">Navigation menu</SheetTitle>\n                                <SheetHeader className=\"flex justify-start text-left\">\n                                    <AppLogoIcon className=\"h-6 w-6 fill-current text-black dark:text-white\" />\n                                </SheetHeader>\n                                <div className=\"flex h-full flex-1 flex-col space-y-4 p-4\">\n                                    <div className=\"flex h-full flex-col justify-between text-sm\">\n                                        <div className=\"flex flex-col space-y-4\">\n                                            {mainNavItems.map((item) => (\n                                                <Link\n                                                    key={item.title}\n                                                    href={item.href}\n                                                    className=\"flex items-center space-x-2 font-medium\"\n                                                >\n                                                    {item.icon && <item.icon className=\"h-5 w-5\" />}\n                                                    <span>{item.title}</span>\n                                                </Link>\n                                            ))}\n                                        </div>\n\n                                        <div className=\"flex flex-col space-y-4\">\n                                            {rightNavItems.map((item) => (\n                                                <a\n                                                    key={item.title}\n                                                    href={toUrl(item.href)}\n                                                    target=\"_blank\"\n                                                    rel=\"noopener noreferrer\"\n                                                    className=\"flex items-center space-x-2 font-medium\"\n                                                >\n                                                    {item.icon && <item.icon className=\"h-5 w-5\" />}\n                                                    <span>{item.title}</span>\n                                                </a>\n                                            ))}\n                                        </div>\n                                    </div>\n                                </div>\n                            </SheetContent>\n                        </Sheet>\n                    </div>\n\n                    <Link href=\"/\" prefetch className=\"flex items-center space-x-2\">\n                        <AppLogo />\n                    </Link>\n\n                    {/* Desktop Navigation */}\n                    <div className=\"ml-6 hidden h-full items-center space-x-6 lg:flex\">\n                        <NavigationMenu className=\"flex h-full items-stretch\">\n                            <NavigationMenuList className=\"flex h-full items-stretch space-x-2\">\n                                {mainNavItems.map((item, index) => (\n                                    <NavigationMenuItem\n                                        key={index}\n                                        className=\"relative flex h-full items-center\"\n                                    >\n                                        <Link\n                                            href={item.href}\n                                            className={cn(\n                                                navigationMenuTriggerStyle(),\n                                                whenCurrentUrl(item.href, activeItemStyles),\n                                                \"h-9 cursor-pointer px-3\",\n                                            )}\n                                        >\n                                            {item.icon && <item.icon className=\"mr-2 h-4 w-4\" />}\n                                            {item.title}\n                                        </Link>\n                                        {isCurrentUrl(item.href) && (\n                                            <div className=\"absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white\"></div>\n                                        )}\n                                    </NavigationMenuItem>\n                                ))}\n                            </NavigationMenuList>\n                        </NavigationMenu>\n                    </div>\n\n                    <div className=\"ml-auto flex items-center space-x-2\">\n                        <div className=\"relative flex items-center space-x-1\">\n                            <Button\n                                variant=\"ghost\"\n                                size=\"icon\"\n                                className=\"group h-9 w-9 cursor-pointer\"\n                            >\n                                <Search className=\"!size-5 opacity-80 group-hover:opacity-100\" />\n                            </Button>\n                            <div className=\"ml-1 hidden gap-1 lg:flex\">\n                                {rightNavItems.map((item) => (\n                                    <Tooltip key={item.title}>\n                                        <TooltipTrigger>\n                                            <a\n                                                href={toUrl(item.href)}\n                                                target=\"_blank\"\n                                                rel=\"noopener noreferrer\"\n                                                className=\"group inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium text-accent-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\"\n                                            >\n                                                <span className=\"sr-only\">{item.title}</span>\n                                                {item.icon && (\n                                                    <item.icon className=\"size-5 opacity-80 group-hover:opacity-100\" />\n                                                )}\n                                            </a>\n                                        </TooltipTrigger>\n                                        <TooltipContent>\n                                            <p>{item.title}</p>\n                                        </TooltipContent>\n                                    </Tooltip>\n                                ))}\n                            </div>\n                        </div>\n                        {user && (\n                            <DropdownMenu>\n                                <DropdownMenuTrigger\n                                    render={\n                                        <Button\n                                            variant=\"ghost\"\n                                            className=\"size-10 rounded-full p-1\"\n                                        />\n                                    }\n                                >\n                                    <Avatar className=\"size-8 overflow-hidden rounded-full\">\n                                        <AvatarImage src={user.avatar} alt={user.name} />\n                                        <AvatarFallback className=\"rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white\">\n                                            {getInitials(user.name)}\n                                        </AvatarFallback>\n                                    </Avatar>\n                                </DropdownMenuTrigger>\n                                <DropdownMenuContent className=\"w-56\" align=\"end\">\n                                    <UserMenuContent user={user} />\n                                </DropdownMenuContent>\n                            </DropdownMenu>\n                        )}\n                    </div>\n                </div>\n            </div>\n            {breadcrumbs.length > 1 && (\n                <div className=\"flex w-full border-b border-sidebar-border/70\">\n                    <div className=\"mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl\">\n                        <Breadcrumbs breadcrumbs={breadcrumbs} />\n                    </div>\n                </div>\n            )}\n        </>\n    );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}