44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Route } from "@/routes/_auth";
|
||
|
|
import { useRouter } from "@tanstack/react-router";
|
||
|
|
import { ArrowLeft, Search } from "lucide-react";
|
||
|
|
import { useAuth } from "@/hooks/useAuth";
|
||
|
|
|
||
|
|
export default function SessionTimeOutErrorPage() {
|
||
|
|
const router = useRouter();
|
||
|
|
const navigate = Route.useNavigate();
|
||
|
|
const auth = useAuth();
|
||
|
|
const handleLogout = () => {
|
||
|
|
auth.logout();
|
||
|
|
router.invalidate().finally(() => {
|
||
|
|
navigate({ to: "/login" });
|
||
|
|
});
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div className="flex flex-col items-center justify-center min-h-[70vh] px-4 text-center">
|
||
|
|
<div className="space-y-6 max-w-md mx-auto">
|
||
|
|
<div className="relative mx-auto w-40 h-40 md:w-52 md:h-52">
|
||
|
|
<div className="absolute inset-0 bg-primary/10 rounded-full animate-pulse" />
|
||
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
||
|
|
<Search className="h-20 w-20 md:h-24 md:w-24 text-primary" strokeWidth={1.5} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-3">
|
||
|
|
<h2 className="text-2xl md:text-3xl font-semibold">Phiên hết hạn</h2>
|
||
|
|
<p className="text-muted-foreground">Bạn cần đăng nhập lại</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="pt-6">
|
||
|
|
<Button asChild size="lg" className="gap-2" onClick={handleLogout}>
|
||
|
|
<div className="flex items-center gap-1">
|
||
|
|
<ArrowLeft className="h-4 w-4" />
|
||
|
|
Trở về trang đăng nhập
|
||
|
|
</div>
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|