leaky-ships/leaky-ships/pages/dev/logout.tsx

38 lines
1.2 KiB
TypeScript

import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { useRouter } from "next/router"
import React, { useEffect } from "react"
function logout() {
const router = useRouter()
useEffect(() => {
const timeout = setTimeout(() => router.push("/dev"), 2000)
return () => clearTimeout(timeout)
}, [])
return (
<div className="flex h-screen w-full items-center justify-center bg-gray-900 bg-[url('/images/wallpaper.jpg')] bg-cover bg-center bg-no-repeat">
<div className="rounded-xl bg-gray-800 bg-opacity-50 px-16 py-10 shadow-lg backdrop-blur-md max-sm:px-8">
<div className="text-white">
<div className="mb-8 flex flex-col items-center">
<img
className="rounded-full shadow-lg"
src="/logo512.png"
width="150"
alt="Avatar"
/>
<h1 className="mb-2 text-2xl">Leaky Ships</h1>
<span className="text-gray-300">Logging out...</span>
</div>
<FontAwesomeIcon
className="my-16 mx-24 animate-spin text-6xl"
icon={faSpinnerThird}
/>
</div>
</div>
</div>
)
}
export default logout