sarlink-portal/components/add-devices-to-cart-button.tsx

"use client";
import { deviceCartAtom } from "@/lib/atoms";
import type { Device } from "@/lib/backend-types";
import { useAtomValue, useSetAtom } from "jotai";
import React from "react";

export default function AddDevicesToCartButton({ device }: { device: Device }) {
	const setDeviceCart = useSetAtom(deviceCartAtom);
	const devices = useAtomValue(deviceCartAtom);

	const isChecked = devices.some((d) => d.id === device.id);

	if (device.has_a_pending_payment || device.is_active) {
		return null;
	}
	return (
		<input
			type="checkbox"
			disabled={device.blocked || device.is_active}
			className="peer accent-[#f49d1b] size-4"
			checked={isChecked}
			onChange={() =>
				setDeviceCart((prev) =>
					isChecked
						? prev.filter((d) => d.id !== device.id)
						: [...prev, device],
				)
			}
		/>
	);
}