77 lines
2.0 KiB
JavaScript
77 lines
2.0 KiB
JavaScript
import React from "react";
|
|
import { Home, ShoppingBag, ShoppingCart, Heart, User } from "lucide-react";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import styles from "./FooterBar.module.scss";
|
|
import { useCart } from "../../app/api/useCart";
|
|
import { useGetFavoritesQuery } from "../../app/api/favoritesApi";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
const FooterBar = () => {
|
|
const location = useLocation();
|
|
const { t } = useTranslation();
|
|
const { cartCount } = useCart();
|
|
const { data: favoriteData } = useGetFavoritesQuery();
|
|
|
|
const favoriteCount = favoriteData?.length || 0;
|
|
|
|
const navItems = [
|
|
{ id: 1, icon: <Home />, label: t("navbar.home"), count: 0, path: "/" },
|
|
{
|
|
id: 2,
|
|
icon: <ShoppingBag />,
|
|
label: t("navbar.brands"),
|
|
count: 0,
|
|
path: "/brands",
|
|
},
|
|
{
|
|
id: 3,
|
|
icon: <ShoppingCart />,
|
|
label: t("navbar.cart"),
|
|
count: cartCount,
|
|
path: "/cart",
|
|
},
|
|
{
|
|
id: 4,
|
|
icon: <Heart />,
|
|
label: t("wishtList.likedProducts"),
|
|
count: favoriteCount,
|
|
path: "/wishlist",
|
|
},
|
|
{
|
|
id: 5,
|
|
icon: <User />,
|
|
label: t("profile.profile"),
|
|
count: 0,
|
|
path: "/profile",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<footer className={styles.navbar}>
|
|
<div className={styles.container}>
|
|
<div className={styles.navItems}>
|
|
{navItems.map((item) => (
|
|
<Link
|
|
key={item.id}
|
|
to={item.path}
|
|
className={`${styles.navItem} ${
|
|
location.pathname === item.path ? styles.active : ""
|
|
}`}
|
|
>
|
|
<div className={styles.iconWrapper}>
|
|
<div className={styles.icon}>{item.icon}</div>
|
|
{item.count > 0 && (
|
|
<div className={styles.badge}>{item.count}</div>
|
|
)}
|
|
</div>
|
|
<span className={styles.label}>{item.label}</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default FooterBar;
|