revoke-button.tsx45 lines · main

1	'use client';
2
3	import { useState, useTransition } from 'react';
4
5	interface Props {
6	keyId: string;
7	onRevoke: (keyId: string) => Promise<void>;
8	}
9
10	export function RevokeButton({ keyId, onRevoke }: Props) {
11	const [pending, startTransition] = useTransition();
12	const [confirming, setConfirming] = useState(false);
13
14	if (confirming) {
15	return (
16	<div className="flex items-center gap-2">
17	<button
18	type="button"
19	onClick={() => setConfirming(false)}
20	className="font-mono text-xs text-[var(--color-text-muted)]"
21	>
22	cancel
23	</button>
24	<button
25	type="button"
26	disabled={pending}
27	onClick={() => startTransition(() => onRevoke(keyId))}
28	className="rounded-md border border-red-400 px-3 py-1.5 font-mono text-xs text-red-400 disabled:opacity-50"
29	>
30	{pending ? 'revoking...' : 'confirm revoke'}
31	</button>
32	</div>
33	);
34	}
35
36	return (
37	<button
38	type="button"
39	onClick={() => setConfirming(true)}
40	className="rounded-md border border-[var(--color-border)] px-3 py-1.5 font-mono text-xs text-[var(--color-text-muted)] transition hover:border-red-400 hover:text-red-400"
41	>
42	revoke
43	</button>
44	);
45	}