Files
football-next/app/(admin)/admin/rounds/[id]/DeleteMatchButton.tsx
2026-04-07 10:38:28 +03:30

58 lines
2.2 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
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 DeleteMatchButton({ matchId, hasEvents }: { matchId: string; hasEvents: boolean }) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [showConfirm, setShowConfirm] = useState(false);
async function handleDelete() {
setLoading(true);
const res = await fetch(`/api/matches/${matchId}`, {
method: "DELETE",
});
if (res.ok) {
router.refresh();
} else {
const data = await res.json();
alert(data.error || "خطا در حذف");
}
setLoading(false);
setShowConfirm(false);
}
return (
<>
<button onClick={() => setShowConfirm(true)}
className="bg-red-600 text-white px-3 py-1.5 rounded-lg text-sm hover:bg-red-700 transition">
حذف
</button>
{showConfirm && (
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowConfirm(false)}>
<div className="bg-white rounded-2xl p-6 max-w-sm mx-4" onClick={(e) => e.stopPropagation()}>
<h3 className="text-lg font-bold mb-3">حذف بازی</h3>
<p className="text-gray-600 mb-2">آیا مطمئن هستید که میخواهید این بازی را حذف کنید؟</p>
{hasEvents && (
<p className="text-red-600 text-sm mb-4"> این بازی دارای {hasEvents} رویداد است که همگی حذف خواهند شد.</p>
)}
<div className="flex gap-3">
<button onClick={handleDelete} disabled={loading}
className="flex-1 bg-red-600 text-white py-2 rounded-xl font-bold hover:bg-red-700 transition disabled:opacity-50">
{loading ? "در حال حذف..." : "بله، حذف شود"}
</button>
<button onClick={() => setShowConfirm(false)}
className="flex-1 bg-gray-200 text-gray-700 py-2 rounded-xl font-bold hover:bg-gray-300 transition">
انصراف
</button>
</div>
</div>
</div>
)}
</>
);
}