1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
|
import { useRouter } from 'next/router';
import Link from '../Link/Link';
import {
HomeIcon,
Bars3Icon,
ShoppingCartIcon,
ChevronLeftIcon,
} from '@heroicons/react/24/outline';
import { useEffect, useState } from 'react';
import { getCart, getCountCart } from '@/core/utils/cart';
import useTransactions from '@/lib/transaction/hooks/useTransactions';
import { useCartStore } from '~/modules/cart/stores/useCartStore';
import useAuth from '@/core/hooks/useAuth';
/**
* The AppBar component is a navigation component used to display a header or toolbar
* in a web application.
*
* @param {Object} props - Props received by the component.
* @param {string} props.title - The title to be displayed on the AppBar.
* @returns {JSX.Element} - Rendered AppBar component.
*/
const AppBar = ({ title }) => {
const router = useRouter();
const auth = useAuth();
const { cart } = useCartStore();
const query = {
context: 'quotation',
site: auth?.webRole === null && auth?.site ? auth.site : null,
};
const [cartCount, setCartCount] = useState(0);
const { transactions } = useTransactions({ query });
useEffect(() => {
const handleCartChange = () => {
const cart = async () => {
const listCart = await getCountCart();
setCartCount(listCart);
};
cart();
};
handleCartChange();
window.addEventListener('localStorageChange', handleCartChange);
return () => {
window.removeEventListener('localStorageChange', handleCartChange);
};
}, [transactions.data, cart]);
return (
<nav className='sticky top-0 z-50 bg-white border-b border-gray_r-6 flex justify-between'>
<div className='flex items-center'>
<button type='button' className='p-4' onClick={() => router.back()}>
<ChevronLeftIcon className='w-6 stroke-2' />
</button>
<div className='font-medium text-h-sm line-clamp-1'>{title}</div>
</div>
<div className='flex items-center px-2'>
<Link href='/shop/cart' className='py-4 px-2'>
<div className='relative'>
<ShoppingCartIcon className='w-6 text-gray_r-12' />
{cartCount > 0 && (
<span className='absolute -top-2 -right-2 badge-solid-red rounded-full w-5 h-5 flex items-center justify-center'>
{cartCount}
</span>
)}
</div>
</Link>
<Link href='/' className='py-4 px-2'>
<HomeIcon className='w-6 text-gray_r-12' />
</Link>
<Link href='/my/menu' className='py-4 px-2'>
<Bars3Icon className='w-6 text-gray_r-12' />
</Link>
</div>
</nav>
);
};
export default AppBar;
|
