badge for cart

src/components/navigation/BottomNavBar.tsx

@@ -10,6 +10,7 @@ import HeartIcon from '../icons/HeartIcon'
 import { useParams, usePathname } from 'next/navigation'
 import HomeIcon from '../icons/HomeIcon'
 import { useTranslation } from 'react-i18next';
+import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart';
 
 function BottomNavBar() {
   const params = useParams();
@@ -19,6 +20,13 @@ function BottomNavBar() {
   const { t } = useTranslation('common', {
     keyPrefix: 'BottomNavbar'
   });
+  const { items } = useCart();
+
+  const cartItemsCount = React.useMemo(() => {
+    return Object.values(items).reduce((total, item) => {
+      return total + (item?.quantity || 0);
+    }, 0);
+  }, [items]);
 
   return (
     <div className="fixed bottom-0 left-0 w-full bg-transparent pointer-events-none">
@@ -42,7 +50,20 @@ function BottomNavBar() {
             <nav
               className="h-full px-2 grid grid-cols-5 gap-x-2 text-[10px] items-end"
             >
-              <BottomNavLink href={`/${name}/cart`} icon={<BagIcon width={20} height={20} />} value={t('Cart')} />
+              <BottomNavLink
+                href={`/${name}/cart`}
+                icon={
+                  <div className="relative">
+                    <BagIcon width={20} height={20} />
+                    {cartItemsCount > 0 && (
+                      <span className="absolute -top-2 -right-2 flex items-center justify-center min-w-[18px] h-[18px] px-1 text-[10px] font-medium text-white bg-primary rounded-full">
+                        {cartItemsCount > 99 ? '99+' : cartItemsCount}
+                      </span>
+                    )}
+                  </div>
+                }
+                value={t('Cart')}
+              />
               <BottomNavLink href={`/${name}/pager`} icon={<PagerIcon width={20} height={20} />} value={t('Pager')} />
               <BottomNavHighlightLink
                 href={`/${name}`}