32 lines
876 B
TypeScript
32 lines
876 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { inBasket, toggleBasket, type BasketItem } from "../lib/basket";
|
|
|
|
export default function BasketButton({ item }: { item: BasketItem }) {
|
|
const [inside, setInside] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const update = () => {
|
|
try {
|
|
setInside(inBasket(item));
|
|
} catch {}
|
|
};
|
|
update();
|
|
window.addEventListener("basket-change", update);
|
|
return () => window.removeEventListener("basket-change", update);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [item.media_type, item.id]);
|
|
|
|
return (
|
|
<button
|
|
onClick={() => setInside(toggleBasket(item))}
|
|
className="btn"
|
|
title={inside ? "Aus dem Korb entfernen" : "In den Korb legen"}
|
|
style={{ whiteSpace: "nowrap" }}
|
|
>
|
|
{inside ? "✓ Korb" : "+ Korb"}
|
|
</button>
|
|
);
|
|
}
|