54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
|
import { CheckCircle, AlertCircle, Loader2 } from "lucide-react";
|
||
|
|
type PaymentStatus = "success" | "processing" | "error";
|
||
|
|
|
||
|
|
interface PaymentStatusProps {
|
||
|
|
status: PaymentStatus;
|
||
|
|
title: string;
|
||
|
|
message?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function PaymentStatus({
|
||
|
|
status,
|
||
|
|
message,
|
||
|
|
title,
|
||
|
|
}: PaymentStatusProps) {
|
||
|
|
const statusConfig = {
|
||
|
|
success: {
|
||
|
|
icon: CheckCircle,
|
||
|
|
color: "text-green-500",
|
||
|
|
bgColor: "bg-green-50",
|
||
|
|
borderColor: "border-green-200",
|
||
|
|
},
|
||
|
|
processing: {
|
||
|
|
icon: Loader2,
|
||
|
|
color: "text-blue-500",
|
||
|
|
bgColor: "bg-blue-50",
|
||
|
|
borderColor: "border-blue-200",
|
||
|
|
},
|
||
|
|
error: {
|
||
|
|
icon: AlertCircle,
|
||
|
|
color: "text-red-500",
|
||
|
|
bgColor: "bg-red-50",
|
||
|
|
borderColor: "border-red-200",
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const { icon: Icon, color, bgColor, borderColor } = statusConfig[status];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`mb-4 flex items-center rounded-lg border p-4 ${bgColor} ${borderColor}`}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className={`size-8 shrink-0 ${color} ${status === "processing" ? "animate-spin" : ""}`}
|
||
|
|
>
|
||
|
|
<Icon className="size-8" />
|
||
|
|
</div>
|
||
|
|
<div className="ml-3">
|
||
|
|
<h3 className={`text-sm font-medium ${color}`}>{title}</h3>
|
||
|
|
{message && <div className="mt-2 text-sm text-gray-700">{message}</div>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|