Files
frontend/app/components/TabBar.jsx
fullofempt bb833d956e +-good
2025-12-13 19:33:57 +05:00

64 lines
2.1 KiB
JavaScript

"use client";
import React from "react";
import { FaClock, FaNewspaper, FaHome, FaCog } from "react-icons/fa";
import { useRouter, usePathname } from "next/navigation";
import { useAuth } from "../context/AuthContext";
const TabBar = () => {
const router = useRouter();
const pathname = usePathname();
const { user } = useAuth();
if (!user) return null; // не показываем таббар, если не залогинен
// маршруты по ролям
const routesByRole = {
user: [
{ key: "home", icon: FaHome, href: "/createRequest" },
{ key: "history", icon: FaClock, href: "/historyRequest" },
{ key: "news", icon: FaNewspaper, href: "/news" },
{ key: "profile", icon: FaCog, href: "/ProfilePage" },
],
volunteer: [
{ key: "home", icon: FaHome, href: "/mainValounter" },
{ key: "history", icon: FaClock, href: "/valounterHistoryRequest" },
{ key: "news", icon: FaNewspaper, href: "/volunteer/news" },
{ key: "profile", icon: FaCog, href: "/valounterProfilePage" },
],
moderator: [
{ key: "queue", icon: FaHome, href: "/moderatorMain" },
{ key: "history", icon: FaClock, href: "/moderatorHistoryRequest" },
{ key: "news", icon: FaNewspaper, href: "/moderator/news" },
{ key: "profile", icon: FaCog, href: "/moderatorProfilePage" },
],
};
const tabs = routesByRole[user.role] || [];
return (
<nav className="fixed bottom-0 left-0 right-0 flex justify-center">
<div className="w-full max-w-md bg-white rounded-t-xl flex items-center justify-around py-4 shadow-inner">
{tabs.map((tab) => {
const Icon = tab.icon;
const active = pathname === tab.href;
return (
<button
key={tab.key}
type="button"
onClick={() => router.push(tab.href)}
className={`flex flex-col items-center gap-1 ${
active ? "text-[#90D2F9]" : "text-gray-400"
}`}
>
<Icon size={20} />
</button>
);
})}
</div>
</nav>
);
};
export default TabBar;