@pagamio/frontend-commons-lib
Version:
Pagamio library for Frontend reusable components like the form engine and table container
67 lines (66 loc) • 7.09 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Avatar, DarkThemeToggle, Dropdown, Navbar, Tooltip } from 'flowbite-react';
import { HiLockClosed, HiLogout, HiMenuAlt1, HiUser, HiX } from 'react-icons/hi';
import { v4 as uuidv4 } from 'uuid';
import React, { useCallback } from 'react';
import { useAuth } from '../../auth';
import { useAppSidebarContext } from '../../context';
import { useMediaQueries } from '../../shared';
import { LocaleSwitcher, useLibTranslations, useTranslation } from '../../translations';
const AppSidebarToggleButton = React.memo(({ isMobileOpen, onToggle }) => {
const { tLib } = useLibTranslations();
return (_jsxs("button", { onClick: onToggle, className: "mr-3 cursor-pointer rounded p-2 text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white", children: [_jsx("span", { className: "sr-only", children: tLib('sidebar.toggle', 'Toggle sidebar') }), _jsx("div", { className: "md:hidden", children: isMobileOpen ? _jsx(HiX, { className: "h-6 w-6" }) : _jsx(HiMenuAlt1, { className: "h-6 w-6" }) }), _jsx("div", { className: "hidden md:block", children: _jsx(HiMenuAlt1, { className: "h-6 w-6" }) })] }));
});
const AppDarkThemeToggleWithTooltip = React.memo(() => {
const { tLib } = useLibTranslations();
return (_jsxs(_Fragment, { children: [_jsx("div", { className: "hidden dark:block", children: _jsx(Tooltip, { content: tLib('theme.toggleLight', 'Toggle light mode'), children: _jsx(DarkThemeToggle, {}) }) }), _jsx("div", { className: "dark:hidden", children: _jsx(Tooltip, { content: tLib('theme.toggleDark', 'Toggle dark mode'), children: _jsx(DarkThemeToggle, {}) }) })] }));
});
const AppUserDropdown = React.memo(({ onLogout, onSelectChangePassword, onSelectProfile, navbarTextColors = { general: 'text-white' }, }) => {
const { user, logout } = useAuth();
const { tLib } = useLibTranslations();
const initials = user?.userName
? user.userName
.split(' ')
.map((name) => name.charAt(0).toUpperCase())
.join('')
: 'AU';
const handleLogout = useCallback(async () => {
await logout();
onLogout?.();
}, [logout, onLogout]);
return (_jsxs(Dropdown, { className: "rounded", arrowIcon: false, inline: true, label: _jsxs("span", { className: navbarTextColors.general, children: [_jsx("span", { className: "sr-only", children: user?.userName }), _jsx(Avatar, { rounded: true, size: "sm", placeholderInitials: initials })] }), children: [_jsx(Dropdown.Header, { className: "px-4 py-3", children: _jsx("span", { className: "block text-sm font-medium capitalize text-primary-500", children: user?.userName }) }), _jsx(Dropdown.Item, { onClick: () => onSelectProfile(), children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiUser, { className: "text-gray-500", size: 18 }), _jsx("span", { children: tLib('userProfile', 'User Profile') })] }) }), _jsx(Dropdown.Item, { onClick: () => onSelectChangePassword?.(), children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiLockClosed, { className: "text-gray-500", size: 18 }), _jsx("span", { children: tLib('changePassword', 'Change Password') })] }) }), _jsx(Dropdown.Divider, {}), _jsx(Dropdown.Item, { onClick: handleLogout, children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(HiLogout, { className: "text-gray-500", size: 18 }), _jsx("span", { children: tLib('signOut', 'Sign Out') })] }) })] }));
});
const EnvironmentBanner = ({ show = false, text, bgColor = 'red', color = 'black', }) => {
if (!show)
return null;
return (_jsx("div", { className: "fixed top-0 right-10 z-[110]", style: {
transform: 'rotate(45deg)',
transformOrigin: 'top right',
top: '100px',
right: '-20px',
}, children: _jsx("div", { className: `flex items-center justify-center h-4 px-12 py-1 shadow-lg`, style: {
backgroundColor: bgColor,
minWidth: '160px',
}, children: _jsx("span", { className: "text-xs text-center font-bold tracking-wider uppercase whitespace-nowrap", style: {
color,
textShadow: '0 1px 2px rgba(0,0,0,0.3)',
letterSpacing: '0.1em',
}, children: text }) }) }));
};
const AppDashboardNavbar = ({ dashboardLink = '/dashboard', brandImage, linkComponent, showThemeToggler = true, appLabel, onSelectChangePassword, onSelectProfile, onLogout, hideSidebarToggle = false, navBarActionComponents = [], showLocaleSwitcher = false, localeNames, environmentBanner = { show: false, text: '' }, navbarBackground = { light: 'bg-purple', dark: 'dark:bg-gray-800' }, navbarTextColors = { brand: 'text-white', general: 'text-white' }, }) => {
const sidebar = useAppSidebarContext();
const { isMd } = useMediaQueries();
const { t } = useTranslation();
const handleToggleSidebar = useCallback(() => {
if (isMd) {
sidebar.desktop.toggle();
}
else {
sidebar.mobile.toggle();
}
}, [isMd, sidebar.desktop, sidebar.mobile]);
const navbarClasses = `fixed top-0 w-full border-b border-gray-200 ${navbarBackground.light} p-0 dark:border-gray-700 ${navbarBackground.dark} sm:p-0`;
return (_jsxs(_Fragment, { children: [_jsx(Navbar, { fluid: true, className: navbarClasses, style: { zIndex: 100 }, children: _jsx("div", { className: "w-full p-3 pr-4", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center", children: [!hideSidebarToggle && (_jsx(AppSidebarToggleButton, { isMobileOpen: sidebar.mobile.isOpen, onToggle: handleToggleSidebar })), _jsxs(Navbar.Brand, { as: linkComponent, href: dashboardLink, className: "mr-14", children: [brandImage && (_jsx("img", { src: brandImage.src, alt: t(brandImage.alt), width: brandImage.width, height: brandImage.height, className: "h-8" })), _jsx("p", { className: `font-bold ${navbarTextColors.brand} text-[15px] mb-0`, children: t(appLabel) })] })] }), _jsxs("div", { className: "flex items-center lg:gap-3", children: [navBarActionComponents.map((action) => (_jsx(React.Fragment, { children: action }, `app-nav-bar-component-${uuidv4()}`))), showThemeToggler && _jsx(AppDarkThemeToggleWithTooltip, {}), showLocaleSwitcher && (_jsx("div", { className: `mx-2 ${navbarTextColors.general}`, children: _jsx(LocaleSwitcher, { localeNames: localeNames, className: "min-w-[120px] text-sm text-white bg-white z-50" }) })), _jsx("div", { className: "flex items-center", children: _jsx(AppUserDropdown, { onLogout: onLogout, onSelectChangePassword: onSelectChangePassword, onSelectProfile: onSelectProfile, navbarTextColors: navbarTextColors }) })] })] }) }) }), _jsx(EnvironmentBanner, { ...environmentBanner })] }));
};
export default AppDashboardNavbar;
export { AppSidebarToggleButton, AppDarkThemeToggleWithTooltip, AppUserDropdown, AppDashboardNavbar };