@beyondcorp/beyond-ui 1.1.11 → 1.1.13
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.
|
@@ -6,15 +6,17 @@ import { Input } from '../Input/Input.js';
|
|
|
6
6
|
import { Button } from '../Button/Button.js';
|
|
7
7
|
import { Avatar, AvatarImage, AvatarFallback } from '../Avatar/Avatar.js';
|
|
8
8
|
import { Badge } from '../Badge/Badge.js';
|
|
9
|
+
import { useBreakpoint } from '../../hooks/useBreakpoint.js';
|
|
9
10
|
|
|
10
11
|
const DashboardHeader = React.forwardRef(({ className, breadcrumbs = [{ label: "Dashboard" }], onMenuToggle, sidebarCollapsed = false, showSearch = true, searchPlaceholder = "Search...", onSearchChange, ...props }, ref) => {
|
|
11
12
|
const [searchValue, setSearchValue] = React.useState("");
|
|
13
|
+
const { isAbove } = useBreakpoint();
|
|
12
14
|
const handleSearchChange = (e) => {
|
|
13
15
|
const value = e.target.value;
|
|
14
16
|
setSearchValue(value);
|
|
15
17
|
onSearchChange?.(value);
|
|
16
18
|
};
|
|
17
|
-
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: [jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) }), 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))) })] }), showSearch && (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: [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" })] }) }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Settings, { className: "h-5 w-5" }) }), 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" })] })] })] })] }) }));
|
|
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: [jsx(Button, { variant: "ghost", size: "sm", onClick: onMenuToggle, className: "md:hidden", children: jsx(Menu, { className: "h-5 w-5" }) }), isAbove('md') && (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))) }))] }), showSearch && (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: [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" })] }) }), jsx(Button, { variant: "ghost", size: "sm", children: jsx(Settings, { className: "h-5 w-5" }) }), 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" })] })] })] })] }) }));
|
|
18
20
|
});
|
|
19
21
|
DashboardHeader.displayName = "DashboardHeader";
|
|
20
22
|
|
|
@@ -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\nconst DashboardHeader = React.forwardRef<HTMLDivElement, DashboardHeaderProps>(\n ({
|
|
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\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 ...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 {/* Mobile Menu Button */}\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 {/* Breadcrumbs */}\n {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 */}\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 {/* Right Section */}\n <div className=\"flex items-center space-x-3\">\n {/* Notifications */}\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 {/* Settings */}\n <Button variant=\"ghost\" size=\"sm\">\n <Settings className=\"h-5 w-5\" />\n </Button>\n\n {/* User Profile */}\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 </div>\n </div>\n </header>\n );\n }\n);\n\nDashboardHeader.displayName = \"DashboardHeader\";\n\nexport { DashboardHeader, type BreadcrumbItem };"],"names":["_jsx","_jsxs"],"mappings":"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"}
|