31 lines
901 B
TypeScript
31 lines
901 B
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { addToCart, type CartItem } from "@/lib/cart";
|
|
import { ShoppingCart, Check } from "lucide-react";
|
|
|
|
interface Props {
|
|
item: Omit<CartItem, "quantity">;
|
|
className?: string;
|
|
}
|
|
|
|
export function AddToCartButton({ item, className }: Props) {
|
|
const [added, setAdded] = useState(false);
|
|
|
|
function handle() {
|
|
addToCart({ ...item, quantity: 1 });
|
|
setAdded(true);
|
|
setTimeout(() => setAdded(false), 1500);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handle}
|
|
className={className ?? "flex items-center gap-1.5 rounded-lg border border-primary-300 bg-primary-50 px-3 py-1.5 text-sm font-medium text-primary-700 hover:bg-primary-100 transition-colors"}
|
|
>
|
|
{added ? <Check className="h-3.5 w-3.5" /> : <ShoppingCart className="h-3.5 w-3.5" />}
|
|
{added ? "Added" : "Add to Cart"}
|
|
</button>
|
|
);
|
|
}
|