@beyondcorp/beyond-ui 1.1.17 → 1.1.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,20 +3,24 @@ interface BreadcrumbItem {
|
|
|
3
3
|
label: string;
|
|
4
4
|
href?: string;
|
|
5
5
|
}
|
|
6
|
+
type ResponsiveShow = boolean | {
|
|
7
|
+
mobile?: boolean;
|
|
8
|
+
desktop?: boolean;
|
|
9
|
+
};
|
|
6
10
|
interface DashboardHeaderProps {
|
|
7
11
|
className?: string;
|
|
8
12
|
breadcrumbs?: BreadcrumbItem[];
|
|
9
13
|
onMenuToggle?: () => void;
|
|
10
14
|
sidebarCollapsed?: boolean;
|
|
11
|
-
showSearch?:
|
|
15
|
+
showSearch?: ResponsiveShow;
|
|
12
16
|
searchPlaceholder?: string;
|
|
13
17
|
onSearchChange?: (value: string) => void;
|
|
14
18
|
style?: React.CSSProperties;
|
|
15
|
-
showBreadcrumbs?:
|
|
16
|
-
showNotifications?:
|
|
17
|
-
showSettings?:
|
|
18
|
-
showProfile?:
|
|
19
|
-
showMenuButton?:
|
|
19
|
+
showBreadcrumbs?: ResponsiveShow;
|
|
20
|
+
showNotifications?: ResponsiveShow;
|
|
21
|
+
showSettings?: ResponsiveShow;
|
|
22
|
+
showProfile?: ResponsiveShow;
|
|
23
|
+
showMenuButton?: ResponsiveShow;
|
|
20
24
|
leftSlot?: React.ReactNode;
|
|
21
25
|
centerSlot?: React.ReactNode;
|
|
22
26
|
rightSlot?: React.ReactNode;
|
|
@@ -10,13 +10,27 @@ import { useBreakpoint } from '../../hooks/useBreakpoint.js';
|
|
|
10
10
|
|
|
11
11
|
const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "Dashboard" }], onMenuToggle, sidebarCollapsed = false, showSearch = true, searchPlaceholder = "Search...", onSearchChange, showBreadcrumbs = true, showNotifications = true, showSettings = true, showProfile = true, showMenuButton = true, leftSlot, centerSlot, rightSlot, ...props }, ref) => {
|
|
12
12
|
const [searchValue, setSearchValue] = React.useState("");
|
|
13
|
-
const {
|
|
13
|
+
const { currentBreakpoint } = useBreakpoint();
|
|
14
|
+
// Helper to resolve ResponsiveShow prop
|
|
15
|
+
const isSectionVisible = (prop, view) => {
|
|
16
|
+
if (typeof prop === "boolean")
|
|
17
|
+
return prop;
|
|
18
|
+
if (!prop)
|
|
19
|
+
return true;
|
|
20
|
+
if (view === "mobile")
|
|
21
|
+
return prop.mobile ?? false;
|
|
22
|
+
if (view === "desktop")
|
|
23
|
+
return prop.desktop ?? false;
|
|
24
|
+
return true;
|
|
25
|
+
};
|
|
26
|
+
const isMobile = currentBreakpoint === "sm" || currentBreakpoint === "md";
|
|
27
|
+
const isDesktop = currentBreakpoint === "lg" || currentBreakpoint === "xl" || currentBreakpoint === "2xl";
|
|
14
28
|
const handleSearchChange = (e) => {
|
|
15
29
|
const value = e.target.value;
|
|
16
30
|
setSearchValue(value);
|
|
17
31
|
onSearchChange?.(value);
|
|
18
32
|
};
|
|
19
|
-
return (jsx("header", { ref: ref, className: cn("z-30 bg-white border-b border-gray-200 transition-all duration-300", className), style: props.style, ...props, children: jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [jsxs("div", { className: "flex items-center space-x-4", children: [leftSlot, showMenuButton && (jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) })), showBreadcrumbs
|
|
33
|
+
return (jsx("header", { ref: ref, className: cn("z-30 bg-white border-b border-gray-200 transition-all duration-300", className), style: props.style, ...props, children: jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [jsxs("div", { className: "flex items-center space-x-4", children: [leftSlot, (isSectionVisible(showMenuButton, isMobile ? "mobile" : "desktop")) && (jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) })), isSectionVisible(showBreadcrumbs, isDesktop ? "desktop" : "mobile") && isDesktop && (jsx("nav", { className: "flex items-center space-x-2 text-sm", children: breadcrumbs.map((item, index) => (jsxs(React.Fragment, { children: [index > 0 && (jsx("span", { className: "text-gray-400", children: "/" })), item.href ? (jsx("a", { href: item.href, className: "text-gray-600 hover:text-gray-900 transition-colors", children: item.label })) : (jsx("span", { className: "text-gray-900 font-medium", children: item.label }))] }, index))) }))] }), centerSlot ? (jsx("div", { className: "flex-1 flex justify-center", children: centerSlot })) : (isSectionVisible(showSearch, isMobile ? "mobile" : "desktop") && (jsx("div", { className: "flex-1 max-w-md mx-8", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" }), jsx(Input, { type: "text", placeholder: searchPlaceholder, value: searchValue, onChange: handleSearchChange, className: "pl-10 bg-gray-50 border-gray-200 focus:bg-white" })] }) }))), jsxs("div", { className: "flex items-center space-x-3", children: [rightSlot, isSectionVisible(showNotifications, isMobile ? "mobile" : "desktop") && (jsx("div", { className: "relative", children: jsxs(Button, { variant: "ghost", size: "sm", className: "relative", children: [jsx(Bell, { className: "h-5 w-5" }), jsx(Badge, { variant: "danger", className: "absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center", children: "3" })] }) })), isSectionVisible(showSettings, isMobile ? "mobile" : "desktop") && (jsx(Button, { variant: "ghost", size: "sm", children: jsx(Settings, { className: "h-5 w-5" }) })), isSectionVisible(showProfile, isMobile ? "mobile" : "desktop") && (jsxs("div", { className: "flex items-center space-x-3 pl-3 border-l border-gray-200", children: [jsxs("div", { className: "hidden sm:block text-right", children: [jsx("p", { className: "text-sm font-medium text-gray-900", children: "John Doe" }), jsx("p", { className: "text-xs text-gray-500", children: "Administrator" })] }), jsxs(Avatar, { size: "sm", children: [jsx(AvatarImage, { src: "https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64" }), jsx(AvatarFallback, { children: "JD" })] })] }))] })] }) }));
|
|
20
34
|
});
|
|
21
35
|
DashboardHeader.displayName = "DashboardHeader";
|
|
22
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DashboardHeader.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Search, Bell, Settings, Menu } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\n\ninterface BreadcrumbItem {\n label: string;\n href?: string;\n}\n\ninterface DashboardHeaderProps {\n className?: string;\n breadcrumbs?: BreadcrumbItem[];\n onMenuToggle?: () => void;\n sidebarCollapsed?: boolean;\n showSearch?: boolean;\n searchPlaceholder?: string;\n onSearchChange?: (value: string) => void;\n style?: React.CSSProperties;\n\n // New flexible API\n showBreadcrumbs?: boolean; // default true\n showNotifications?: boolean; // default true\n showSettings?: boolean; // default true\n showProfile?: boolean; // default true\n showMenuButton?: boolean; // default true\n\n leftSlot?: React.ReactNode;\n centerSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\n}\n\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nconst DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(\n ({\n className,\n breadcrumbs = [{ label: \"Dashboard\" }],\n onMenuToggle,\n sidebarCollapsed = false,\n showSearch = true,\n searchPlaceholder = \"Search...\",\n onSearchChange,\n showBreadcrumbs = true,\n showNotifications = true,\n showSettings = true,\n showProfile = true,\n showMenuButton = true,\n leftSlot,\n centerSlot,\n rightSlot,\n ...props\n }, ref) => {\n const [searchValue, setSearchValue] = React.useState(\"\");\n const { isAbove } = useBreakpoint();\n\n const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value;\n setSearchValue(value);\n onSearchChange?.(value);\n };\n\n return (\n <header\n ref={ref}\n className={cn(\n \"z-30 bg-white border-b border-gray-200 transition-all duration-300\",\n className\n )}\n style={props.style}\n {...props}\n >\n <div className=\"flex items-center justify-between px-6 py-4\">\n {/* Left Section */}\n <div className=\"flex items-center space-x-4\">\n {/* Custom left slot */}\n {leftSlot}\n\n {/* Mobile Menu Button */}\n {showMenuButton && (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={onMenuToggle}\n className=\"md:hidden\"\n >\n <Menu className=\"h-5 w-5\" />\n </Button>\n )}\n\n {/* Breadcrumbs */}\n {showBreadcrumbs && isAbove('md') && (\n <nav className=\"flex items-center space-x-2 text-sm\">\n {breadcrumbs.map((item, index) => (\n <React.Fragment key={index}>\n {index > 0 && (\n <span className=\"text-gray-400\">/</span>\n )}\n {item.href ? (\n <a\n href={item.href}\n className=\"text-gray-600 hover:text-gray-900 transition-colors\"\n >\n {item.label}\n </a>\n ) : (\n <span className=\"text-gray-900 font-medium\">\n {item.label}\n </span>\n )}\n </React.Fragment>\n ))}\n </nav>\n )}\n </div>\n\n {/* Center Section - Search or custom center slot */}\n {centerSlot ? (\n <div className=\"flex-1 flex justify-center\">{centerSlot}</div>\n ) : (\n showSearch && (\n <div className=\"flex-1 max-w-md mx-8\">\n <div className=\"relative\">\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\n <Input\n type=\"text\"\n placeholder={searchPlaceholder}\n value={searchValue}\n onChange={handleSearchChange}\n className=\"pl-10 bg-gray-50 border-gray-200 focus:bg-white\"\n />\n </div>\n </div>\n )\n )}\n\n {/* Right Section */}\n <div className=\"flex items-center space-x-3\">\n {/* Custom right slot */}\n {rightSlot}\n\n {/* Notifications */}\n {showNotifications && (\n <div className=\"relative\">\n <Button variant=\"ghost\" size=\"sm\" className=\"relative\">\n <Bell className=\"h-5 w-5\" />\n <Badge\n variant=\"danger\"\n className=\"absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center\"\n >\n 3\n </Badge>\n </Button>\n </div>\n )}\n\n {/* Settings */}\n {showSettings && (\n <Button variant=\"ghost\" size=\"sm\">\n <Settings className=\"h-5 w-5\" />\n </Button>\n )}\n\n {/* User Profile */}\n {showProfile && (\n <div className=\"flex items-center space-x-3 pl-3 border-l border-gray-200\">\n <div className=\"hidden sm:block text-right\">\n <p className=\"text-sm font-medium text-gray-900\">John Doe</p>\n <p className=\"text-xs text-gray-500\">Administrator</p>\n </div>\n <Avatar size=\"sm\">\n <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n </div>\n )}\n </div>\n </div>\n </header>\n );\n }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem, type DashboardHeaderProps };"],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;;;AAqCA,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EACC,SAAS,EACT,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,CAAC,EACtC,YAAY,EACZ,gBAAgB,GAAG,KAAK,EACxB,UAAU,GAAG,IAAI,EACjB,iBAAiB,GAAG,WAAW,EAC/B,cAAc,EACd,eAAe,GAAG,IAAI,EACtB,iBAAiB,GAAG,IAAI,EACxB,YAAY,GAAG,IAAI,EACnB,WAAW,GAAG,IAAI,EAClB,cAAc,GAAG,IAAI,EACrB,QAAQ,EACR,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,GAAG,KAAI;AACR,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;AACxD,IAAA,MAAM,EAAE,OAAO,EAAE,GAAG,aAAa,EAAE;AAEnC,IAAA,MAAM,kBAAkB,GAAG,CAAC,CAAsC,KAAI;AACpE,QAAA,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK;QAC5B,cAAc,CAAC,KAAK,CAAC;AACrB,QAAA,cAAc,GAAG,KAAK,CAAC;AACzB,IAAA,CAAC;AAED,IAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oEAAoE,EACpE,SAAS,CACV,EACD,KAAK,EAAE,KAAK,CAAC,KAAK,EAAA,GACd,KAAK,YAETC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6CAA6C,EAAA,QAAA,EAAA,CAE1DA,cAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAEzC,QAAQ,EAGR,cAAc,KACbD,GAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,YAAY,EACrB,SAAS,EAAC,WAAW,EAAA,QAAA,EAErBA,GAAA,CAAC,IAAI,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CACrB,CACV,EAGA,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC,KAC/BA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qCAAqC,EAAA,QAAA,EACjD,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAC3BC,IAAA,CAAC,KAAK,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACZ,KAAK,GAAG,CAAC,KACRD,cAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAA,GAAA,EAAA,CAAS,CACzC,EACA,IAAI,CAAC,IAAI,IACRA,WACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,SAAS,EAAC,qDAAqD,EAAA,QAAA,EAE9D,IAAI,CAAC,KAAK,EAAA,CACT,KAEJA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,2BAA2B,EAAA,QAAA,EACxC,IAAI,CAAC,KAAK,EAAA,CACN,CACR,KAfkB,KAAK,CAgBT,CAClB,CAAC,EAAA,CACE,CACP,CAAA,EAAA,CACG,EAGL,UAAU,IACTA,aAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAE,UAAU,EAAA,CAAO,KAE9D,UAAU,KACRA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,sBAAsB,YACnCC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,UAAU,EAAA,QAAA,EAAA,CACvBD,GAAA,CAAC,MAAM,IAAC,SAAS,EAAC,0EAA0E,EAAA,CAAG,EAC/FA,IAAC,KAAK,EAAA,EACJ,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,iBAAiB,EAC9B,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,kBAAkB,EAC5B,SAAS,EAAC,iDAAiD,GAC3D,CAAA,EAAA,CACE,EAAA,CACF,CACP,CACF,EAGDC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAA,CAEzC,SAAS,EAGT,iBAAiB,KAChBD,aAAK,SAAS,EAAC,UAAU,EAAA,QAAA,EACvBC,IAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,UAAU,EAAA,QAAA,EAAA,CACpDD,GAAA,CAAC,IAAI,IAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAC5BA,IAAC,KAAK,EAAA,EACJ,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAC,+EAA+E,EAAA,QAAA,EAAA,GAAA,EAAA,CAGnF,IACD,EAAA,CACL,CACP,EAGA,YAAY,KACXA,GAAA,CAAC,MAAM,EAAA,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAA,QAAA,EAC/BA,GAAA,CAAC,QAAQ,EAAA,EAAC,SAAS,EAAC,SAAS,EAAA,CAAG,EAAA,CACzB,CACV,EAGA,WAAW,KACVC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,2DAA2D,EAAA,QAAA,EAAA,CACxEA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,4BAA4B,EAAA,QAAA,EAAA,CACzCD,WAAG,SAAS,EAAC,mCAAmC,EAAA,QAAA,EAAA,UAAA,EAAA,CAAa,EAC7DA,GAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,eAAA,EAAA,CAAkB,IAClD,EACNC,IAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAC,IAAI,aACfD,GAAA,CAAC,WAAW,IAAC,GAAG,EAAC,iGAAiG,EAAA,CAAG,EACrHA,IAAC,cAAc,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAoB,IAC5B,CAAA,EAAA,CACL,CACP,IACG,CAAA,EAAA,CACF,EAAA,CACC;AAEb,CAAC;AAGH,eAAe,CAAC,WAAW,GAAG,iBAAiB;;;;"}
|
|
1
|
+
{"version":3,"file":"DashboardHeader.js","sources":["../../../src/components/DashboardHeader/DashboardHeader.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Search, Bell, Settings, Menu } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { Input } from \"../Input\";\nimport { Button } from \"../Button\";\nimport { Avatar, AvatarImage, AvatarFallback } from \"../Avatar\";\nimport { Badge } from \"../Badge\";\n\ninterface BreadcrumbItem {\n label: string;\n href?: string;\n}\n\ntype ResponsiveShow = boolean | { mobile?: boolean; desktop?: boolean };\n\ninterface DashboardHeaderProps {\n className?: string;\n breadcrumbs?: BreadcrumbItem[];\n onMenuToggle?: () => void;\n sidebarCollapsed?: boolean;\n showSearch?: ResponsiveShow;\n searchPlaceholder?: string;\n onSearchChange?: (value: string) => void;\n style?: React.CSSProperties;\n\n // New flexible API\n showBreadcrumbs?: ResponsiveShow; // default true\n showNotifications?: ResponsiveShow; // default true\n showSettings?: ResponsiveShow; // default true\n showProfile?: ResponsiveShow; // default true\n showMenuButton?: ResponsiveShow; // default true\n\n leftSlot?: React.ReactNode;\n centerSlot?: React.ReactNode;\n rightSlot?: React.ReactNode;\n}\n\nimport { useBreakpoint } from \"../../hooks/useBreakpoint\";\n\nconst DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(\n ({\n className,\n breadcrumbs = [{ label: \"Dashboard\" }],\n onMenuToggle,\n sidebarCollapsed = false,\n showSearch = true,\n searchPlaceholder = \"Search...\",\n onSearchChange,\n showBreadcrumbs = true,\n showNotifications = true,\n showSettings = true,\n showProfile = true,\n showMenuButton = true,\n leftSlot,\n centerSlot,\n rightSlot,\n ...props\n }, ref) => {\n const [searchValue, setSearchValue] = React.useState(\"\");\n const { currentBreakpoint } = useBreakpoint();\n\n // Helper to resolve ResponsiveShow prop\n const isSectionVisible = (\n prop: ResponsiveShow | undefined,\n view: \"mobile\" | \"desktop\"\n ): boolean => {\n if (typeof prop === \"boolean\") return prop;\n if (!prop) return true;\n if (view === \"mobile\") return prop.mobile ?? false;\n if (view === \"desktop\") return prop.desktop ?? false;\n return true;\n };\n\n const isMobile = currentBreakpoint === \"sm\" || currentBreakpoint === \"md\";\n const isDesktop = currentBreakpoint === \"lg\" || currentBreakpoint === \"xl\" || currentBreakpoint === \"2xl\";\n\n const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const value = e.target.value;\n setSearchValue(value);\n onSearchChange?.(value);\n };\n\n return (\n <header\n ref={ref}\n className={cn(\n \"z-30 bg-white border-b border-gray-200 transition-all duration-300\",\n className\n )}\n style={props.style}\n {...props}\n >\n <div className=\"flex items-center justify-between px-6 py-4\">\n {/* Left Section */}\n <div className=\"flex items-center space-x-4\">\n {/* Custom left slot */}\n {leftSlot}\n\n {/* Mobile Menu Button */}\n {(isSectionVisible(showMenuButton, isMobile ? \"mobile\" : \"desktop\")) && (\n <Button\n variant=\"ghost\"\n size=\"sm\"\n onClick={onMenuToggle}\n className=\"md:hidden\"\n >\n <Menu className=\"h-5 w-5\" />\n </Button>\n )}\n\n {/* Breadcrumbs */}\n {isSectionVisible(showBreadcrumbs, isDesktop ? \"desktop\" : \"mobile\") && isDesktop && (\n <nav className=\"flex items-center space-x-2 text-sm\">\n {breadcrumbs.map((item, index) => (\n <React.Fragment key={index}>\n {index > 0 && (\n <span className=\"text-gray-400\">/</span>\n )}\n {item.href ? (\n <a\n href={item.href}\n className=\"text-gray-600 hover:text-gray-900 transition-colors\"\n >\n {item.label}\n </a>\n ) : (\n <span className=\"text-gray-900 font-medium\">\n {item.label}\n </span>\n )}\n </React.Fragment>\n ))}\n </nav>\n )}\n </div>\n\n {/* Center Section - Search or custom center slot */}\n {centerSlot ? (\n <div className=\"flex-1 flex justify-center\">{centerSlot}</div>\n ) : (\n isSectionVisible(showSearch, isMobile ? \"mobile\" : \"desktop\") && (\n <div className=\"flex-1 max-w-md mx-8\">\n <div className=\"relative\">\n <Search className=\"absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400\" />\n <Input\n type=\"text\"\n placeholder={searchPlaceholder}\n value={searchValue}\n onChange={handleSearchChange}\n className=\"pl-10 bg-gray-50 border-gray-200 focus:bg-white\"\n />\n </div>\n </div>\n )\n )}\n\n {/* Right Section */}\n <div className=\"flex items-center space-x-3\">\n {/* Custom right slot */}\n {rightSlot}\n\n {/* Notifications */}\n {isSectionVisible(showNotifications, isMobile ? \"mobile\" : \"desktop\") && (\n <div className=\"relative\">\n <Button variant=\"ghost\" size=\"sm\" className=\"relative\">\n <Bell className=\"h-5 w-5\" />\n <Badge\n variant=\"danger\"\n className=\"absolute -top-1 -right-1 h-5 w-5 text-xs p-0 flex items-center justify-center\"\n >\n 3\n </Badge>\n </Button>\n </div>\n )}\n\n {/* Settings */}\n {isSectionVisible(showSettings, isMobile ? \"mobile\" : \"desktop\") && (\n <Button variant=\"ghost\" size=\"sm\">\n <Settings className=\"h-5 w-5\" />\n </Button>\n )}\n\n {/* User Profile */}\n {isSectionVisible(showProfile, isMobile ? \"mobile\" : \"desktop\") && (\n <div className=\"flex items-center space-x-3 pl-3 border-l border-gray-200\">\n <div className=\"hidden sm:block text-right\">\n <p className=\"text-sm font-medium text-gray-900\">John Doe</p>\n <p className=\"text-xs text-gray-500\">Administrator</p>\n </div>\n <Avatar size=\"sm\">\n <AvatarImage src=\"https://images.pexels.com/photos/774909/pexels-photo-774909.jpeg?auto=compress&cs=tinysrgb&w=64\" />\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n </div>\n )}\n </div>\n </div>\n </header>\n );\n }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem, type DashboardHeaderProps };"],"names":["_jsx","_jsxs"],"mappings":"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"}
|