75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
|
|
interface StateScreenProps {
|
|
type: "success" | "error" | "info" | "warning" | "empty";
|
|
message: string;
|
|
redirectUrl?: string;
|
|
delay?: number;
|
|
}
|
|
|
|
export function StateScreen({
|
|
type,
|
|
message,
|
|
redirectUrl,
|
|
delay = 3000,
|
|
}: StateScreenProps) {
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
if (redirectUrl) {
|
|
const timer = setTimeout(() => {
|
|
router.push(redirectUrl);
|
|
}, delay);
|
|
|
|
return () => clearTimeout(timer);
|
|
}
|
|
}, [redirectUrl, delay, router]);
|
|
|
|
const getStyles = () => {
|
|
switch (type) {
|
|
case "success":
|
|
return "bg-green-100 text-green-800";
|
|
case "error":
|
|
return "bg-red-100 text-red-800";
|
|
case "info":
|
|
return "bg-blue-100 text-blue-800";
|
|
case "warning":
|
|
return "bg-yellow-100 text-yellow-800";
|
|
case "empty":
|
|
return "bg-gray-100 text-gray-800";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
|
|
const getTitle = () => {
|
|
switch (type) {
|
|
case "success":
|
|
return "Success!";
|
|
case "error":
|
|
return "Error!";
|
|
case "info":
|
|
return "Info";
|
|
case "warning":
|
|
return "Warning!";
|
|
case "empty":
|
|
return "No Content";
|
|
default:
|
|
return "";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`flex flex-col items-center justify-center h-screen ${getStyles()}`}
|
|
>
|
|
<h1 className="text-2xl font-bold">{getTitle()}</h1>
|
|
<p className="text-sm text-gray-600">{message}</p>
|
|
{redirectUrl && <p className="text-xs mt-2">Redirecting...</p>}
|
|
</div>
|
|
);
|
|
}
|