@brainfish-ai/devdoc 0.1.42 → 0.1.44

package/renderer/components/docs-header.js

@@ -0,0 +1,202 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import Link from "next/link";
+import Image from "next/image";
+import { ArrowSquareOut, List, ChatCircle, X, MagnifyingGlass } from "@phosphor-icons/react";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { useMobile } from "@/lib/api-docs/mobile-context";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+// Default logo fallback
+const DEFAULT_LOGO = {
+    url: 'https://cdn.prod.website-files.com/639181964f4fe88697a20a0a/67af64a5ba42bb659b8560c9_Logo%20(3).svg',
+    alt: 'Logo',
+    width: 80,
+    height: 24
+};
+export function DocsHeader({ navigationTabs = [], activeTab, onTabChange, docsName, docsLogo, docsHeader, docsNavbar, onSearchClick }) {
+    const { isMobile, isLeftSidebarOpen, isRightSidebarOpen, toggleLeftSidebar, toggleRightSidebar } = useMobile();
+    // Use config values with defaults
+    // Support both single URL and separate light/dark logos
+    const hasLightDarkLogos = docsLogo?.light && docsLogo?.dark;
+    const logo = {
+        url: docsLogo?.url || DEFAULT_LOGO.url,
+        light: docsLogo?.light,
+        dark: docsLogo?.dark,
+        alt: docsLogo?.alt || DEFAULT_LOGO.alt,
+        width: docsLogo?.width || DEFAULT_LOGO.width,
+        height: docsLogo?.height || DEFAULT_LOGO.height
+    };
+    const showSearch = docsHeader?.showSearch !== false // Default true
+    ;
+    const showThemeToggle = docsHeader?.showThemeToggle !== false // Default true
+    ;
+    const navbarLinks = docsNavbar?.links || [];
+    const navbarPrimary = docsNavbar?.primary;
+    // Use navigation tabs directly from config (already ordered)
+    const tabs = navigationTabs.sort((a, b)=>a.order - b.order);
+    return /*#__PURE__*/ _jsxs("header", {
+        className: "docs-header sticky top-0 z-50 bg-background border-b border-border",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex h-14 w-full items-center justify-between px-3 sm:px-6",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            isMobile && /*#__PURE__*/ _jsx(Button, {
+                                variant: "ghost",
+                                size: "icon",
+                                onClick: toggleLeftSidebar,
+                                className: "docs-header-menu-button lg:hidden h-9 w-9",
+                                "aria-label": isLeftSidebarOpen ? "Close menu" : "Open menu",
+                                children: isLeftSidebarOpen ? /*#__PURE__*/ _jsx(X, {
+                                    className: "h-5 w-5",
+                                    weight: "bold"
+                                }) : /*#__PURE__*/ _jsx(List, {
+                                    className: "h-5 w-5",
+                                    weight: "bold"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(Link, {
+                                href: docsLogo?.href || "/",
+                                className: "docs-header-logo flex items-center gap-2 sm:gap-3 min-h-[44px] min-w-[44px] touch-manipulation",
+                                children: [
+                                    hasLightDarkLogos ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Image, {
+                                                src: logo.light,
+                                                alt: logo.alt,
+                                                width: logo.width,
+                                                height: logo.height,
+                                                className: "w-auto dark:hidden pointer-events-none",
+                                                style: {
+                                                    height: logo.height
+                                                },
+                                                priority: true
+                                            }),
+                                            /*#__PURE__*/ _jsx(Image, {
+                                                src: logo.dark,
+                                                alt: logo.alt,
+                                                width: logo.width,
+                                                height: logo.height,
+                                                className: "w-auto hidden dark:block pointer-events-none",
+                                                style: {
+                                                    height: logo.height
+                                                },
+                                                priority: true
+                                            })
+                                        ]
+                                    }) : /*#__PURE__*/ _jsx(Image, {
+                                        src: logo.url,
+                                        alt: logo.alt,
+                                        width: logo.width,
+                                        height: logo.height,
+                                        className: "w-auto dark:invert pointer-events-none",
+                                        style: {
+                                            height: logo.height
+                                        },
+                                        priority: true
+                                    }),
+                                    docsName && /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("div", {
+                                                className: "hidden sm:block h-5 w-px bg-border"
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "docs-header-title hidden sm:inline text-sm font-medium text-muted-foreground pointer-events-none",
+                                                children: docsName
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    showSearch && /*#__PURE__*/ _jsx("div", {
+                        className: "docs-header-search hidden md:flex flex-1 max-w-md mx-6",
+                        children: /*#__PURE__*/ _jsxs("button", {
+                            onClick: onSearchClick,
+                            className: "relative w-full flex items-center gap-2 px-3 h-9 bg-muted/50 border border-border rounded-md text-sm text-muted-foreground hover:bg-muted/70 transition-colors",
+                            children: [
+                                /*#__PURE__*/ _jsx(MagnifyingGlass, {
+                                    className: "h-4 w-4"
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    className: "flex-1 text-left",
+                                    children: "Search..."
+                                }),
+                                /*#__PURE__*/ _jsx("kbd", {
+                                    className: "pointer-events-none hidden sm:inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium",
+                                    children: "⌘K"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-1 sm:gap-2",
+                        children: [
+                            navbarLinks.length > 0 && /*#__PURE__*/ _jsx("nav", {
+                                className: "docs-header-nav hidden lg:flex items-center gap-1",
+                                children: navbarLinks.map((link)=>/*#__PURE__*/ _jsxs(Link, {
+                                        href: link.href,
+                                        className: "docs-header-nav-link flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-muted/50 rounded-sm transition-colors",
+                                        ...link.external && {
+                                            target: "_blank",
+                                            rel: "noopener noreferrer"
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                children: link.label
+                                            }),
+                                            link.external && /*#__PURE__*/ _jsx(ArrowSquareOut, {
+                                                className: "h-3.5 w-3.5",
+                                                weight: "bold"
+                                            })
+                                        ]
+                                    }, link.href))
+                            }),
+                            navbarPrimary && /*#__PURE__*/ _jsx(Button, {
+                                asChild: true,
+                                size: "sm",
+                                className: "docs-header-button docs-button-primary hidden sm:flex",
+                                children: /*#__PURE__*/ _jsx(Link, {
+                                    href: navbarPrimary.href,
+                                    children: navbarPrimary.label
+                                })
+                            }),
+                            showThemeToggle && /*#__PURE__*/ _jsx(ThemeToggle, {}),
+                            isMobile && /*#__PURE__*/ _jsx(Button, {
+                                variant: "ghost",
+                                size: "icon",
+                                onClick: toggleRightSidebar,
+                                className: "docs-header-button lg:hidden h-9 w-9",
+                                "aria-label": isRightSidebarOpen ? "Close assistant" : "Open assistant",
+                                children: isRightSidebarOpen ? /*#__PURE__*/ _jsx(X, {
+                                    className: "h-5 w-5",
+                                    weight: "bold"
+                                }) : /*#__PURE__*/ _jsx(ChatCircle, {
+                                    className: "h-5 w-5",
+                                    weight: "fill"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            }),
+            tabs.length > 0 && /*#__PURE__*/ _jsx("div", {
+                className: "docs-tabs flex items-center px-3 sm:px-6 border-y border-border overflow-x-auto overflow-y-visible bg-muted/50 dark:bg-muted/20",
+                children: tabs.map((t)=>/*#__PURE__*/ _jsxs("button", {
+                        onClick: ()=>onTabChange(t.id),
+                        className: cn('docs-tab relative px-4 py-2.5 text-sm font-medium whitespace-nowrap transition-colors', activeTab === t.id ? 'docs-tab-active text-foreground font-semibold' : 'text-muted-foreground hover:text-foreground'),
+                        children: [
+                            t.tab,
+                            activeTab === t.id && /*#__PURE__*/ _jsx("span", {
+                                className: "absolute bottom-0 left-0 right-0 h-[2px] rounded-full bg-primary z-10"
+                            })
+                        ]
+                    }, t.id))
+            })
+        ]
+    });
+}