spomeni/src/components/DeleteMonumentButton.tsx
2026-06-20 19:44:36 +02:00

61 lines
2.0 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
export default function DeleteMonumentButton() {
const [showConfirm, setShowConfirm] = useState(false);
const [deleting, setDeleting] = useState(false);
const router = useRouter();
const handleDelete = async () => {
setDeleting(true);
try {
const res = await fetch("/api/user/monument", { method: "DELETE" });
if (res.ok) {
router.push("/dashboard");
router.refresh();
} else {
const data = await res.json();
alert(data.error || "Не успеа бришењето на споменот");
}
} catch {
alert("Нешто тргна наопаку");
} finally {
setDeleting(false);
setShowConfirm(false);
}
};
if (showConfirm) {
return (
<div className="rounded-lg border border-red-200 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">Дали сте сигурни? Ова ќе го избрише вашиот спомен и сите фотографии трајно.</p>
<div className="mt-3 flex gap-2">
<button
onClick={handleDelete}
disabled={deleting}
className="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-red-700 disabled:opacity-50"
>
{deleting ? "Бришење..." : "Да, избриши трајно"}
</button>
<button
onClick={() => setShowConfirm(false)}
className="rounded-lg border border-stone-200 bg-white px-4 py-2 text-sm font-medium text-stone-700 transition-colors hover:bg-stone-50"
>
Откажи
</button>
</div>
</div>
);
}
return (
<button
onClick={() => setShowConfirm(true)}
className="rounded-lg border border-red-200 px-4 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50"
>
Избриши спомен
</button>
);
}