109 lines
3.4 KiB
JavaScript
109 lines
3.4 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";
|
|
import { useTranslation } from "react-i18next";
|
|
import { label } from "framer-motion/client";
|
|
|
|
export default function BottomNav({ isOwner, isOwnerOrAgent }) {
|
|
const { t } = useTranslation();
|
|
const pathname = usePathname();
|
|
const [isMounted, setIsMounted] = useState(false);
|
|
const bookingsHref = isOwner ? "/owner/reservations" : "/reservations";
|
|
|
|
useEffect(() => {
|
|
setIsMounted(true);
|
|
}, []);
|
|
|
|
const items = [
|
|
{ href: "/", label: t("home"), icon: Home },
|
|
{ href: "/properties", label: t("ourProperties"), icon: Building },
|
|
...(isOwnerOrAgent
|
|
? [
|
|
{ href: "/owner/properties", label: t("myProperties"), icon: Briefcase },
|
|
{ href: "/owner/bookings", label: "عقاراتي المحجوزة", icon: Briefcase },
|
|
{ href: "/reservations", label: "حجوزاتي", icon: Calendar },
|
|
]
|
|
: [{ href: "/booked-properties", label: "حجوزاتي", icon: Briefcase }]),
|
|
{ href: bookingsHref, label: "طلبات الحجز", icon: Calendar },
|
|
|
|
{ href: "/payments", label: t("payments"), icon: CreditCard },
|
|
...(isOwnerOrAgent ? [{ href: "/owner/account-book", label: t("accountBook"), 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 px-1 pb-4 pt-4 pointer-events-none">
|
|
<nav
|
|
className="
|
|
w-fit max-w-full
|
|
rounded-3xl
|
|
bg-gray-50
|
|
px-1 py-3 sm:px-4
|
|
shadow-[0_4px_24px_rgba(251,146,60,0.25)]
|
|
pointer-events-auto
|
|
"
|
|
>
|
|
<div className="flex items-center justify-center gap-0.5 sm:gap-1 overflow-hidden ">
|
|
{items.map((it) => {
|
|
const Icon = it.icon;
|
|
const active = isActive(it.href);
|
|
|
|
return (
|
|
<Link
|
|
key={it.href}
|
|
href={it.href}
|
|
style={{padding:'10px',width:'100px'}}
|
|
className={`
|
|
|
|
flex
|
|
flex-col
|
|
items-center
|
|
justify-center
|
|
rounded-xl
|
|
|
|
transition-all
|
|
duration-200
|
|
ease-out
|
|
|
|
|
|
${active ? "bg-white shadow-sm text-amber-600" : "text-gray-700 hover:bg-white/80 hover:text-amber-600 hover:shadow-md"}
|
|
`}
|
|
>
|
|
<div className="relative">
|
|
<Icon className="h-5 w-5 sm:h-6 sm:w-6" />
|
|
|
|
{it.badge > 0 && (
|
|
<div
|
|
className="
|
|
absolute -right-2 -top-2
|
|
flex h-6 w-7 sm:h-5 sm:w-5
|
|
items-center justify-center
|
|
rounded-full
|
|
bg-red-500
|
|
text-[9px] sm:text-xs
|
|
font-bold
|
|
text-white
|
|
"
|
|
>
|
|
{it.badge > 9 ? "9+" : it.badge}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="mt-0.5 text-[10px] sm:mt-1 sm:text-xs">{it.label}</div>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|