spb/fetcha

1"use client";2import * as React from "react";3import { useRouter } from "next/navigation";4import { Ban } from "lucide-react";5import { cancelCrawl } from "@/actions/crawls";6import { Button } from "@/components/ui/button";78export function CancelCrawlButton({ id, size = "sm" }: { id: string; size?: "xs" | "sm" }) {9  const router = useRouter();10  const [pending, startTransition] = React.useTransition();11  const [error, setError] = React.useState<string | null>(null);12  return (13    <span className="inline-flex items-center gap-2">14      {error ? <span className="text-[11.5px] text-danger">{error}</span> : null}15      <Button16        variant="outline"17        size={size}18        loading={pending}19        onClick={() =>20          startTransition(async () => {21            setError(null);22            const res = await cancelCrawl(id);23            if (!res.ok) setError(res.error.message);24            else router.refresh();25          })26        }27        aria-label={`Cancel crawl ${id}`}28      >29        {!pending ? <Ban className="size-3.5" /> : null} Cancel30      </Button>31    </span>32  );33}34