puppy-lib-components
Version:
A modern TypeScript React component library with generic UI components and football pickem domain components
38 lines (37 loc) • 3.15 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Avatar } from '../Avatar';
import { Button } from '../Button';
import { AppBar, Toolbar, Typography, Box, IconButton, Menu, MenuItem } from '@mui/material';
export const Header = ({ title = 'Football Pickem', logoUrl, navItems = [], user, isAuthenticated = false, onLogin, onLogout, onUserMenuClick, className = '', ...props }) => {
const [anchorEl, setAnchorEl] = React.useState(null);
const displayName = user?.firstName && user?.lastName
? `${user.firstName} ${user.lastName}`
: user?.username || 'User';
const handleUserMenuClick = (event) => {
setAnchorEl(event.currentTarget);
if (onUserMenuClick) {
onUserMenuClick();
}
};
const handleClose = () => {
setAnchorEl(null);
};
return (_jsx(AppBar, { position: "static", className: className, ...props, children: _jsxs(Toolbar, { children: [_jsxs(Box, { display: "flex", alignItems: "center", sx: { flexGrow: 1 }, children: [logoUrl && (_jsx(Box, { component: "img", src: logoUrl, alt: title, sx: { height: 40, marginRight: 2 } })), _jsx(Typography, { variant: "h6", component: "div", sx: { flexGrow: 1 }, children: title })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [navItems.map((item, index) => (_jsx(Typography, { component: "a", href: item.href, sx: {
color: 'inherit',
textDecoration: 'none',
fontWeight: item.active ? 'bold' : 'normal',
'&:hover': {
textDecoration: 'underline',
},
}, children: item.label }, index))), isAuthenticated && user ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(IconButton, { size: "large", "aria-label": "account of current user", "aria-controls": "menu-appbar", "aria-haspopup": "true", onClick: handleUserMenuClick, color: "inherit", children: _jsx(Avatar, { src: user.avatarUrl, fallback: displayName, size: "sm" }) }), _jsxs(Menu, { id: "menu-appbar", anchorEl: anchorEl, anchorOrigin: {
vertical: 'top',
horizontal: 'right',
}, keepMounted: true, transformOrigin: {
vertical: 'top',
horizontal: 'right',
}, open: Boolean(anchorEl), onClose: handleClose, children: [_jsx(MenuItem, { onClick: handleClose, children: _jsx(Typography, { variant: "body2", children: displayName }) }), onLogout && (_jsx(MenuItem, { onClick: () => {
handleClose();
onLogout();
}, children: "Logout" }))] })] })) : (_jsx(Button, { variant: "outline", size: "sm", onClick: onLogin, children: "Login" }))] })] }) }));
};