/
NavBar.js
29 lines (28 loc) · 953 Bytes
/
NavBar.js
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
import { useShoppingCart } from "use-shopping-cart";
import Image from "next/image";
import Link from "next/link";
import ShoppingCart from "./ShoppingCart";
export default function NavBar() {
const { handleCartClick, cartCount } = useShoppingCart();
return (
<nav className="py-5 px-12 flex justify-between">
<Link href="/">
<p className="bg-white text-3xl font-bold underline underline-offset-4 decoration-wavy decoration-2 decoration-emerald-500">
fresh
</p>
</Link>
<button className="relative" onClick={() => handleCartClick()}>
<Image
src="./cart.svg"
width={40}
height={40}
alt="shopping cart icon"
/>
<div className="rounded-full flex justify-center items-center bg-emerald-500 text-xs text-white absolute w-6 h-5 bottom-6 -right-1">
{cartCount}
</div>
</button>
<ShoppingCart />
</nav>
);
}