hamid zarghami
c6a2a54806
Build and Deploy Docker Images / build_and_deploy (push) Has been cancelled
79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
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, Heart, Home2, InfoCircle, Reserve } from "iconsax-react";
|
|
import Link from "next/link";
|
|
import { useParams, usePathname, useRouter } from "next/navigation";
|
|
import { toastLoginRequired } from "../Toast";
|
|
|
|
type BottomNavBarProps = {
|
|
onPagerClick?: () => void;
|
|
};
|
|
|
|
type NavItemProps = {
|
|
href?: string;
|
|
isActive: boolean;
|
|
onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
|
|
onButtonClick?: () => void;
|
|
Icon: Icon;
|
|
};
|
|
|
|
function NavItem({ href, isActive, onClick, onButtonClick, Icon }: NavItemProps) {
|
|
const className = clsx("flex-1 flex items-center justify-center h-full rounded-full", isActive && "bg-primary/12");
|
|
|
|
const icon = <Icon size={20} color="currentColor" variant={isActive ? "Bold" : "Linear"} className={isActive ? "text-primary" : "text-icon-deactive"} />;
|
|
|
|
if (onButtonClick) {
|
|
return (
|
|
<button type="button" onClick={onButtonClick} className={className}>
|
|
{icon}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link href={href ?? "#"} onClick={onClick} className={className}>
|
|
{icon}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
function BottomNavBar({ onPagerClick }: BottomNavBarProps) {
|
|
const params = useParams();
|
|
const name = params.name as string;
|
|
const pathname = usePathname();
|
|
const router = useRouter();
|
|
const { isSuccess } = useGetProfile();
|
|
|
|
const isHomeActive = pathname === `/${name}`;
|
|
const isFavoriteActive = pathname.startsWith(`/${name}/favorite`);
|
|
const isPagerActive = pathname.includes("/pager");
|
|
const isAboutActive = pathname.startsWith(`/${name}/about`);
|
|
const isCartActive = pathname.startsWith(`/${name}/cart`);
|
|
|
|
const handleFavoritesClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
|
|
e.preventDefault();
|
|
if (isSuccess) {
|
|
router.push(`/${name}/favorite`);
|
|
} else {
|
|
e.stopPropagation();
|
|
toastLoginRequired(() => router.push(`/${name}/auth`), "error");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={glassSurfaceNav("mx-auto w-full rounded-full flex items-center h-14 max-w-md gap-2.5")}>
|
|
<NavItem href={`/${name}`} isActive={isHomeActive} Icon={Home2} />
|
|
<NavItem href={`/${name}/favorite`} isActive={isFavoriteActive} onClick={handleFavoritesClick} Icon={Heart} />
|
|
{onPagerClick ? <NavItem isActive={isPagerActive} onButtonClick={onPagerClick} Icon={Reserve} /> : <NavItem href={`/${name}/pager`} isActive={isPagerActive} Icon={Reserve} />}
|
|
<NavItem href={`/${name}/about`} isActive={isAboutActive} Icon={InfoCircle} />
|
|
<NavItem href={`/${name}/cart`} isActive={isCartActive} Icon={Bag2} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BottomNavBar;
|