50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { KeenIcon } from '@/components';
|
|
import { TMenuConfig, MenuItem, MenuLink, MenuTitle, MenuIcon, MenuBadge } from '@/components/menu';
|
|
import clsx from 'clsx';
|
|
import { ReactNode } from 'react';
|
|
|
|
const MegaMenuSubHighlighted = (items: TMenuConfig) => {
|
|
const buildItems = (items: TMenuConfig): ReactNode => {
|
|
return items.map((item, index) => {
|
|
return (
|
|
<MenuItem key={index}>
|
|
<MenuLink
|
|
path={item.path}
|
|
className="
|
|
menu-link border border-transparent
|
|
menu-link-hover:!bg-light menu-link-hover:border-gray-200
|
|
menu-item-active:!bg-light menu-item-active:border-gray-200
|
|
dark:menu-link-hover:!bg-coal-600 dark:menu-link-hover:border-gray-100
|
|
dark:menu-item-active:!bg-coal-600 dark:menu-item-active:border-gray-100
|
|
"
|
|
>
|
|
{item.icon && (
|
|
<MenuIcon>
|
|
<KeenIcon icon={item.icon} />
|
|
</MenuIcon>
|
|
)}
|
|
|
|
<MenuTitle className={clsx('grow-0')}>{item.title}</MenuTitle>
|
|
|
|
{item.disabled && (
|
|
<MenuBadge>
|
|
<span className="badge badge-xs">Soon</span>
|
|
</MenuBadge>
|
|
)}
|
|
|
|
{item.badge && (
|
|
<MenuBadge>
|
|
<span className="badge badge-primary badge-outline badge-xs">{item.badge}</span>
|
|
</MenuBadge>
|
|
)}
|
|
</MenuLink>
|
|
</MenuItem>
|
|
);
|
|
});
|
|
};
|
|
|
|
return buildItems(items);
|
|
};
|
|
|
|
export { MegaMenuSubHighlighted };
|