kanban-dev-webapp/src/components/dashboard/recompute-button.tsx

43 lines
No EOL
1.2 KiB
TypeScript

"use client";
import { useState, useTransition } from "react";
import { RefreshCw } from "lucide-react";
import { recomputeMetricsAction } from "@/app/actions/metrics";
export function RecomputeButton({
projectId,
clientSlug,
projectSlug,
}: {
projectId: string;
clientSlug: string;
projectSlug: string;
}) {
const [pending, startTransition] = useTransition();
const [done, setDone] = useState<string | null>(null);
return (
<span className="flex items-center gap-2">
<button
type="button"
disabled={pending}
onClick={() =>
startTransition(async () => {
const result = await recomputeMetricsAction({
projectId,
clientSlug,
projectSlug,
});
setDone(`${result.commits} commits`);
})
}
className="inline-flex items-center gap-1.5 rounded-lg border border-border-subtle px-2.5 py-1.5 text-xs text-text-secondary hover:bg-surface-raised disabled:opacity-50"
>
<RefreshCw size={13} strokeWidth={2} />
{pending ? "Recomputing…" : "Recompute"}
</button>
{done && <span className="text-xs text-text-muted">{done}</span>}
</span>
);
}