Rocky_Mountain_Vending/components/cart-button.tsx

35 lines
839 B
TypeScript

"use client"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { ShoppingCart } from "lucide-react"
import { useCart } from "@/lib/cart/context"
interface CartButtonProps {
onClick: () => void
}
export function CartButton({ onClick }: CartButtonProps) {
const { getItemCount } = useCart()
const itemCount = getItemCount()
return (
<Button
variant="ghost"
size="icon"
onClick={onClick}
className="relative"
aria-label="Shopping cart"
>
<ShoppingCart className="h-5 w-5" />
{itemCount > 0 && (
<Badge
variant="default"
className="absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs"
>
{itemCount}
</Badge>
)}
</Button>
)
}