63 lines
2.5 KiB
JavaScript
63 lines
2.5 KiB
JavaScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { Home, Building, Calendar, CreditCard, Briefcase, BookOpen } from "lucide-react";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
export default function BottomNav({ isOwner, isOwnerOrAgent }) {
|
|
const pathname = usePathname();
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
const bookingsHref = isOwner ? "/owner/reservations" : "/reservations";
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
}, []);
|
|
|
|
const items = [
|
|
{ href: "/", label: "الرئيسية", icon: Home },
|
|
{ href: "/properties", label: "عقاراتنا", icon: Building },
|
|
...(isOwnerOrAgent ? [{ href: "/owner/properties", label: "عقاراتي", icon: Briefcase }] : []),
|
|
{ href: bookingsHref, label: "الحجوزات", icon: Calendar },
|
|
{ href: "/payments", label: "المدفوعات", icon: CreditCard },
|
|
...(isOwnerOrAgent ? [{ href: "/owner/account-book", label: "دفتر الحسابات", icon: BookOpen }] : []),
|
|
];
|
|
|
|
const isActive = (href) => {
|
|
if (href === "/") return pathname === "/";
|
|
return pathname.startsWith(href);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center pb-4 pt-2 pointer-events-none">
|
|
<nav className="bg-gray-50 rounded-3xl px-4 py-2 shadow-[0_4px_24px_rgba(251,146,60,0.25)] pointer-events-auto">
|
|
<div className="flex items-center justify-center gap-1">
|
|
{items.map((it) => {
|
|
const Icon = it.icon;
|
|
const active = isActive(it.href);
|
|
return (
|
|
<Link
|
|
key={it.href}
|
|
href={it.href}
|
|
className={`relative flex flex-col items-center justify-center px-3 py-2 rounded-xl transition-all duration-200 ease-out hover:shadow-md hover:bg-white/80 ${active ? "bg-white shadow-sm text-amber-600" : "text-gray-700 hover:text-amber-600"}`}
|
|
>
|
|
<div className="relative">
|
|
<Icon className="w-6 h-6" />
|
|
{it.badge > 0 && (
|
|
<div className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
|
|
{it.badge > 9 ? "9+" : it.badge}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="mt-1 text-xs text-center" aria-hidden>
|
|
{it.label}
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|