52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useState } from "react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
|
||
|
|
interface ActionButtonProps {
|
||
|
|
label: string;
|
||
|
|
description: string;
|
||
|
|
status: string;
|
||
|
|
variant?: "blue" | "green" | "purple" | "red";
|
||
|
|
id: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const VARIANT = {
|
||
|
|
blue: "border-blue-300 bg-blue-50 text-blue-700 hover:bg-blue-100",
|
||
|
|
green: "border-green-300 bg-green-50 text-green-700 hover:bg-green-100",
|
||
|
|
purple: "border-purple-300 bg-purple-50 text-purple-700 hover:bg-purple-100",
|
||
|
|
red: "border-red-300 bg-red-50 text-red-700 hover:bg-red-100",
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function ActionButton({ label, description, status, variant = "blue", id }: ActionButtonProps) {
|
||
|
|
const router = useRouter();
|
||
|
|
const [loading, setLoading] = useState(false);
|
||
|
|
|
||
|
|
async function handle() {
|
||
|
|
if (!confirm(`Set status to "${status}"?`)) return;
|
||
|
|
setLoading(true);
|
||
|
|
await fetch("/api/register/update-status", {
|
||
|
|
method: "POST",
|
||
|
|
headers: { "Content-Type": "application/json" },
|
||
|
|
body: JSON.stringify({ id, status }),
|
||
|
|
});
|
||
|
|
router.refresh();
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={handle}
|
||
|
|
disabled={loading}
|
||
|
|
className={`w-full text-left p-5 rounded-lg border-2 transition-colors disabled:opacity-50 ${VARIANT[variant]}`}
|
||
|
|
>
|
||
|
|
<div className="flex items-start justify-between gap-3">
|
||
|
|
<div>
|
||
|
|
<p className="font-bold text-sm">{loading ? "…" : label}</p>
|
||
|
|
<p className="text-xs mt-1 opacity-75">{description}</p>
|
||
|
|
</div>
|
||
|
|
{!loading && <span className="text-lg mt-0.5">→</span>}
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|