delete-env-button.tsx46 lines · main

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