50 lines
1.7 KiB
TypeScript
50 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { CheckSquare, CreditCard, UserCircle, LayoutDashboard } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { Role } from "@prisma/client";
|
|
|
|
const MANAGER_TABS = [
|
|
{ href: "/dashboard", label: "Home", icon: LayoutDashboard },
|
|
{ href: "/approvals", label: "Approvals", icon: CheckSquare },
|
|
{ href: "/profile", label: "Profile", icon: UserCircle },
|
|
];
|
|
|
|
const ACCOUNTS_TABS = [
|
|
{ href: "/dashboard", label: "Home", icon: LayoutDashboard },
|
|
{ href: "/payments", label: "Payments", icon: CreditCard },
|
|
{ href: "/profile", label: "Profile", icon: UserCircle },
|
|
];
|
|
|
|
function tabsForRole(role: Role) {
|
|
if (role === "ACCOUNTS") return ACCOUNTS_TABS;
|
|
return MANAGER_TABS; // MANAGER, SUPERUSER
|
|
}
|
|
|
|
export function MobileBottomNav({ role }: { role: Role }) {
|
|
const pathname = usePathname();
|
|
const tabs = tabsForRole(role);
|
|
|
|
return (
|
|
<nav className="md:hidden flex h-16 shrink-0 items-stretch border-t border-neutral-200 bg-white">
|
|
{tabs.map(({ href, label, icon: Icon }) => {
|
|
const active = pathname === href || pathname.startsWith(href + "/");
|
|
return (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
"flex flex-1 flex-col items-center justify-center gap-0.5 text-xs font-medium transition-colors",
|
|
active ? "text-primary-600" : "text-neutral-500 hover:text-neutral-700"
|
|
)}
|
|
>
|
|
<Icon className={cn("h-5 w-5", active ? "stroke-[2.5]" : "")} />
|
|
{label}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
);
|
|
}
|