sarlink-portal/components/device-cart.tsx

"use client";

import { useAtom } from "jotai";
import { MonitorSmartphone } from "lucide-react";
import { usePathname, useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import { deviceCartAtom } from "@/lib/atoms";

export function DeviceCartDrawer() {
	const pathname = usePathname();
	const [devices, setDevices] = useAtom(deviceCartAtom);
	const router = useRouter();
	if (pathname === "/payment" || pathname === "/devices-to-pay") {
		return null;
	}

	if (devices.length === 0) return null;
	return (
		<div className="bg-sarLinkOrange rounded-lg shadow-2xl dark:hover:bg-orange-900 fixed bottom-20 w-80 uppercase h-auto z-20 left-1/2 transform -translate-x-1/2 hover:ring-2 hover:ring-sarLinkOrange transition-all duration-200 p-2 flex flex-col gap-2">
			<Button
				size={"lg"}
				className="w-ful"
				onClick={() => router.push("/devices-to-pay")}
				variant="secondary"
			>
				<MonitorSmartphone />
				Pay {devices.length > 0 && `(${devices.length})`} {devices.length > 1 ? "devices" : "device"}
			</Button>
			<Button
				variant={"destructive"}
				onClick={() => setDevices([])}
				className="w-full"
			>
				Cancel
			</Button>
		</div>
	);
}