feat: add topup management features including topup creation, cancellation, and countdown timer ✨

components/billing/cancel-topup-button.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { Loader2, Trash2 } from "lucide-react";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { toast } from "sonner";
+import { cancelTopup } from "@/actions/payment";
+import { tryCatch } from "@/utils/tryCatch";
+import { Button } from "../ui/button";
+
+export default function CancelTopupButton({
+  topupId,
+}: { topupId: string }) {
+  const router = useRouter();
+  const [loading, setLoading] = React.useState(false);
+  return (
+    <Button
+      onClick={async () => {
+        setLoading(true);
+        const [error, x] = await tryCatch(cancelTopup({ id: topupId }));
+        console.log(x);
+        if (error) {
+          toast.error(error.message);
+          setLoading(false);
+        } else {
+          toast.success("Topup cancelled successfully!")
+          router.replace("/top-ups");
+        }
+      }}
+      disabled={loading}
+      variant={"destructive"}
+    >
+      Cancel Topup
+      {loading ? <Loader2 className="animate-spin" /> : <Trash2 />}
+    </Button>
+  );
+}