58 lines
2.3 KiB
JavaScript
58 lines
2.3 KiB
JavaScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Home, Building, Calendar, Heart, Bell, Settings } from "lucide-react";
|
|
import React, { useEffect, useState } from "react";
|
|
import { useNotifications } from "@/app/contexts/NotificationsContext";
|
|
|
|
export default function BottomNav({ isOwner }) {
|
|
const { unreadCount } = useNotifications();
|
|
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 },
|
|
{ href: bookingsHref, label: "الحجوزات", icon: Calendar },
|
|
{ href: "/favorites", label: "المفضلة", icon: Heart },
|
|
{ href: "/notifications", label: "الإشعارات", icon: Bell, badge: isMounted ? unreadCount : 0 },
|
|
{ href: "/settings", label: "الإعدادات", icon: Settings },
|
|
];
|
|
|
|
return (
|
|
<nav className="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50">
|
|
<div className="bg-white/95 backdrop-blur-sm border border-gray-200 rounded-3xl shadow-lg px-2 py-2 flex items-center gap-3">
|
|
{items.map((it) => {
|
|
const Icon = it.icon;
|
|
return (
|
|
<Link
|
|
key={it.href}
|
|
href={it.href}
|
|
className="relative group flex flex-col items-center justify-center px-2.5 py-2 text-gray-700 hover:text-amber-600 transition-colors"
|
|
>
|
|
<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="absolute -top-10 left-1/2 -translate-x-1/2 bg-gray-800 text-white text-xs rounded-lg px-2.5 py-1.5 opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none shadow-lg">
|
|
{it.label}
|
|
</div>
|
|
<div className="mt-1 text-xs text-center" aria-hidden>
|
|
{it.label}
|
|
</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|