added notification badge to cart icon

src/components/layout/main.tsx

-import { Fragment, useState, useContext } from 'react';
+import { Fragment, useState, useContext, useEffect } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import {
   UserIcon,
@@ -25,10 +25,18 @@ function classNames(...classes: unknown[]) {
 
 const Main = ({ title, subTitle, children }: LayoutProps) => {
   let auth = useAuth();
-  const { dispatch } = useContext(cartContext);
+  const { cartState, dispatch } = useContext(cartContext);
   let navigate = useNavigate();
   let path = window.location.pathname;
 
+  const [cartCount, setCartCount] = useState(0);
+  useEffect(() => {
+    setCartCount(cartState.cart.reduce(
+      (prev, product) => prev + (product?.quantity ?? 0),
+      0
+    ));
+  }, [cartState]);
+
   const userNavigation = [
     { name: 'Se déconnecter', action: () => {return auth.signout(() => navigate("/"))} },
   ];
@@ -58,9 +66,14 @@ const Main = ({ title, subTitle, children }: LayoutProps) => {
               <div className="flex-1 flex w-full md:ml-0 items-center"><span className="text-xl font-semibold">Dashboard</span></div>
               <div className="ml-4 flex items-center md:ml-6">
                 {path === '/dashboard' &&
-                  <button onClick={() => { toggleCart() }} className="max-w-xs mx-2 bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                  <button onClick={() => { toggleCart() }} className="relative max-w-xs mx-2 bg-white flex items-center text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                     <span className="sr-only">Open cart</span>
                     <ShoppingCartIcon className="h-8 w-8 rounded-full" />
+                    {cartCount > 0 &&
+                      <div className="absolute -top-2 -right-2 w-5 h-5 bg-indigo-700 rounded-full flex justify-center align-sub">
+                        <span className="text-gray-100 font-semibold text-xs">{cartCount}</span>
+                      </div>
+                    }
                   </button>
                 }
                 <Menu as="div" className="mx-2 flex flex-row relative">