33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { ShoppingCart } from "lucide-react";
|
|
import { getCart } from "@/lib/cart";
|
|
|
|
export function CartIcon() {
|
|
const router = useRouter();
|
|
const [count, setCount] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const update = () => setCount(getCart().reduce((s, i) => s + i.quantity, 0));
|
|
update();
|
|
window.addEventListener("cart-updated", update);
|
|
return () => window.removeEventListener("cart-updated", update);
|
|
}, []);
|
|
|
|
return (
|
|
<button
|
|
onClick={() => router.push("/inventory/cart")}
|
|
title="Cart"
|
|
className="relative flex items-center justify-center rounded-lg p-2 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 transition-colors"
|
|
>
|
|
<ShoppingCart className="h-4 w-4" />
|
|
{count > 0 && (
|
|
<span className="absolute -top-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary-600 text-[10px] font-bold text-white leading-none">
|
|
{count > 99 ? "99+" : count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|