57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { Loader2, CheckCircle, XCircle } from "lucide-react";
|
|
|
|
export type TaskStatus = "idle" | "pending" | "success" | "error";
|
|
|
|
interface Props {
|
|
status: TaskStatus;
|
|
message: string;
|
|
show: boolean;
|
|
onClear: () => void;
|
|
}
|
|
|
|
export const SeleniumTaskBanner = ({
|
|
status,
|
|
message,
|
|
show,
|
|
onClear,
|
|
}: Props) => {
|
|
if (!show) return null;
|
|
|
|
const getIcon = () => {
|
|
switch (status) {
|
|
case "pending":
|
|
return <Loader2 className="w-5 h-5 animate-spin text-blue-500" />;
|
|
case "success":
|
|
return <CheckCircle className="w-5 h-5 text-green-500" />;
|
|
case "error":
|
|
return <XCircle className="w-5 h-5 text-red-500" />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="bg-white border border-gray-200 shadow-md rounded-lg p-3 m-4 flex items-start justify-between">
|
|
<div className="flex items-start gap-3">
|
|
{getIcon()}
|
|
<div>
|
|
<div className="font-medium text-gray-800">
|
|
{status === "pending"
|
|
? "Task In Progress"
|
|
: status === "success"
|
|
? "Task Completed"
|
|
: "Task Error"}
|
|
</div>
|
|
<p className="text-gray-600 text-sm">{message}</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClear}
|
|
className="text-sm text-gray-500 hover:text-gray-800"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|