hamid zarghami
85 lines
3.1 KiB
TypeScript
85 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart';
|
|
import { useGetProfile } from '@/app/[name]/(Profile)/profile/hooks/userProfileData';
|
|
import { glassSurfaceNav } from '@/lib/styles/glassSurface';
|
|
import clsx from 'clsx';
|
|
import type { Icon } from 'iconsax-react';
|
|
import { Bag2, Building, Heart, Home2, Receipt21 } from 'iconsax-react';
|
|
import Link from 'next/link';
|
|
import { useParams, usePathname, useRouter } from 'next/navigation';
|
|
import { useMemo } from 'react';
|
|
import { toast } from '../Toast';
|
|
|
|
type NavItemProps = {
|
|
href?: string;
|
|
isActive: boolean;
|
|
onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
Icon: Icon;
|
|
badge?: number;
|
|
};
|
|
|
|
function NavItem({ href, isActive, onClick, Icon, badge }: NavItemProps) {
|
|
const className = clsx('flex-1 flex items-center justify-center h-full rounded-full', isActive && 'bg-primary/12');
|
|
|
|
const icon = (
|
|
<span className="relative">
|
|
<Icon size={20} color="currentColor" variant={isActive ? 'Bold' : 'Linear'} className={isActive ? 'text-primary' : 'text-icon-deactive'} />
|
|
{badge != null && badge > 0 && (
|
|
<span className="absolute -right-1.5 -top-1 flex min-w-3.5 h-3.5 items-center justify-center rounded-full bg-primary px-0.5 text-[8px] font-medium text-container dark:bg-white dark:text-black">
|
|
{badge > 99 ? '99+' : badge}
|
|
</span>
|
|
)}
|
|
</span>
|
|
);
|
|
|
|
return (
|
|
<Link href={href ?? '#'} onClick={onClick} className={className}>
|
|
{icon}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function BottomNavBar() {
|
|
const params = useParams();
|
|
const name = params.name as string;
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const { isSuccess } = useGetProfile();
|
|
const { items } = useCart();
|
|
|
|
const cartItemCount = useMemo(
|
|
() => Object.values(items).reduce((sum, item) => sum + (item?.quantity ?? 0), 0),
|
|
[items],
|
|
);
|
|
|
|
const isCartActive = pathname.startsWith(`/${name}/cart`);
|
|
const isOrderActive = pathname.includes('/order');
|
|
const isHomeActive = pathname === `/${name}`;
|
|
const isAboutActive = pathname.startsWith(`/${name}/about`);
|
|
const isFavoriteActive = pathname.startsWith(`/${name}/favorite`);
|
|
|
|
const handleFavoritesClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
e.preventDefault();
|
|
if (isSuccess) {
|
|
router.push(`/${name}/favorite`);
|
|
} else {
|
|
e.stopPropagation();
|
|
toast('ابتدا لاگین کنید', 'error');
|
|
router.replace(`/${name}/auth`);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={glassSurfaceNav('mx-auto w-full rounded-full flex items-center h-14 max-w-md gap-2.5')}>
|
|
<NavItem href={`/${name}/cart`} isActive={isCartActive} Icon={Bag2} badge={cartItemCount} />
|
|
<NavItem href={`/${name}/order/history`} isActive={isOrderActive} Icon={Receipt21} />
|
|
<NavItem href={`/${name}`} isActive={isHomeActive} Icon={Home2} />
|
|
<NavItem href={`/${name}/about`} isActive={isAboutActive} Icon={Building} />
|
|
<NavItem href={`/${name}/favorite`} isActive={isFavoriteActive} onClick={handleFavoritesClick} Icon={Heart} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BottomNavBar;
|