53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
|
|
export default function ClaimButton({
|
|
collection,
|
|
id,
|
|
disabledReason,
|
|
}: {
|
|
collection: 'settings_fiber' | 'settings_uv' | 'settings_co2gal' | 'settings_co2gan' | 'projects' | string;
|
|
id: string | number;
|
|
disabledReason?: string;
|
|
}) {
|
|
const [busy, setBusy] = useState(false);
|
|
const [msg, setMsg] = useState<string | null>(null);
|
|
|
|
const submit = async () => {
|
|
setBusy(true);
|
|
setMsg(null);
|
|
try {
|
|
const res = await fetch('/api/claims', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ target_collection: collection, target_id: id }),
|
|
});
|
|
const data = await res.json().catch(() => ({}));
|
|
if (res.ok) setMsg('✅ Claim submitted for review.');
|
|
else setMsg(data?.message || '❌ Could not submit claim.');
|
|
} catch {
|
|
setMsg('❌ Network/auth error. Please sign in and try again.');
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1">
|
|
<button
|
|
onClick={submit}
|
|
disabled={busy || !!disabledReason}
|
|
className={`px-3 py-1 rounded-md text-sm border ${
|
|
disabledReason
|
|
? 'opacity-60 cursor-not-allowed'
|
|
: 'bg-accent text-background hover:opacity-90'
|
|
}`}
|
|
>
|
|
{busy ? 'Submitting…' : 'Claim Ownership'}
|
|
</button>
|
|
{disabledReason ? <span className="text-xs text-muted-foreground">{disabledReason}</span> : null}
|
|
{msg ? <span className="text-xs">{msg}</span> : null}
|
|
</div>
|
|
);
|
|
}
|