add feed in / out button page and also button to redirect to button page

This commit is contained in:
Alberto-Audrix committed 2026-09-02 13:33:41 +07:00
1 parent 07b8e2dc25
commit b86bd7a2f4
17 files changed
+719 -28

No files matched your search

+35 -20
View File
@@ -6,6 +6,7 @@ export interface NavItem {
label: string;
icon: React.ReactNode;
permissionId?: string;
href?: string;
subItems?: NavItem[];
disabled?: boolean;
}
@@ -60,26 +61,40 @@ const NavLink: React.FC<NavLinkProps> = ({ item, isActive, isCollapsed, setView,
{!isCollapsed && isOpen && (
<ul className="pl-8 mt-1 space-y-1">
{item.subItems.map((subItem) => (
<li key={subItem.view}>
<button
onClick={() => !subItem.disabled && setView(subItem.view)}
disabled={subItem.disabled}
className={`w-full flex items-center h-9 pl-3 pr-2 rounded-md transition-colors duration-200 group text-left ${
subItem.disabled
? 'opacity-40 cursor-not-allowed text-gray-400'
: view === subItem.view
? 'bg-red-600 text-white shadow-sm'
: 'text-gray-500 hover:bg-gray-100 hover:text-gray-800'
}`}
>
<div className="w-6 text-base flex items-center justify-center -ml-1">
{subItem.icon}
</div>
<span className="ml-2 text-sm font-medium whitespace-nowrap">
{subItem.label}
</span>
{subItem.disabled && <i className="fa-solid fa-lock ml-auto text-xs"></i>}
</button>
<li key={subItem.href ?? subItem.view}>
{subItem.href ? (
<a
href={subItem.href}
className={`w-full flex items-center h-9 pl-3 pr-2 rounded-md transition-colors duration-200 group text-left text-gray-500 hover:bg-gray-100 hover:text-gray-800`}
>
<div className="w-6 text-base flex items-center justify-center -ml-1">
{subItem.icon}
</div>
<span className="ml-2 text-sm font-medium whitespace-nowrap">
{subItem.label}
</span>
</a>
) : (
<button
onClick={() => !subItem.disabled && setView(subItem.view)}
disabled={subItem.disabled}
className={`w-full flex items-center h-9 pl-3 pr-2 rounded-md transition-colors duration-200 group text-left ${
subItem.disabled
? 'opacity-40 cursor-not-allowed text-gray-400'
: view === subItem.view
? 'bg-red-600 text-white shadow-sm'
: 'text-gray-500 hover:bg-gray-100 hover:text-gray-800'
}`}
>
<div className="w-6 text-base flex items-center justify-center -ml-1">
{subItem.icon}
</div>
<span className="ml-2 text-sm font-medium whitespace-nowrap">
{subItem.label}
</span>
{subItem.disabled && <i className="fa-solid fa-lock ml-auto text-xs"></i>}
</button>
)}
</li>
))}
</ul>