src/pages/home/components/Header/Header.tsx

@@ -6,6 +6,7 @@ import logo from '../../../../assets/img/logo.png'
 import Search from 'antd/es/input/Search'
 import { useSelector } from 'react-redux'
 import type { StoreType } from '../../../../stores'
+import type { CartItem } from '../../../../types/cart.type'
 export default function Header() {
     const navigate = useNavigate()
     const menu = [
@@ -28,6 +29,12 @@ export default function Header() {
     const userStore = useSelector((store: StoreType) => {
         return store.user
     })
+
+    function countCartItem() {
+        return userStore.cart?.reduce((cur: number, next: CartItem) => {
+            return cur + next.quantity
+        }, 0)
+    }
     return (
         <header>
             <div className='content'>
@@ -52,9 +59,11 @@ export default function Header() {
                             )
                         })
                     }
-                    <div className='item'>
+                    <div onClick={() => {
+                        window.location.href = "/cart"
+                    }} className='item'>
                         <i className="fa-solid fa-cart-shopping"></i>
-                        <p className='cart_count'>0</p>
+                        <p className='cart_count'>{countCartItem()}</p>
                         <div className='text_box'>
                             <p>Giỏ</p>
                             <p>Hàng</p>

src/stores/slices/user.slice.ts

@@ -7,7 +7,7 @@ import type { CartItem } from "../../types/cart.type";
 interface UserState {
     data: User | null,
     loading: boolean;
-    cart: CartItem[] | []
+    cart: CartItem[] 
 }
 
 const InitUserState: UserState = {