43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
|
|
export function CompleteScreen() {
|
|
const navigate = useNavigate();
|
|
const [count, setCount] = useState(5);
|
|
|
|
useEffect(() => {
|
|
let counter: NodeJS.Timeout;
|
|
|
|
if (count > 0) {
|
|
counter = setTimeout(() => setCount(count - 1), 1000);
|
|
}
|
|
|
|
if (count === 0) {
|
|
navigate('/', { replace: true });
|
|
}
|
|
|
|
return () => {
|
|
clearTimeout(counter);
|
|
};
|
|
}, [count]);
|
|
|
|
return (
|
|
<div className="relative flex h-full w-full flex-col items-center justify-center">
|
|
<div className="mx-auto flex max-w-xl flex-col gap-1.5 text-center">
|
|
<h1 className="text-2xl font-light leading-none text-white">
|
|
<span className="font-semibold">You're ready</span>, redirecting in {count}
|
|
</h1>
|
|
<p className="text-white/70">
|
|
Thank you for using Lume. Lume doesn't use telemetry. If you encounter any
|
|
problems, please submit a report via the "Report Issue" button.
|
|
<br />
|
|
You can find it while using the application.
|
|
</p>
|
|
</div>
|
|
<div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 transform items-center justify-center">
|
|
<img src="/lume.png" alt="lume" className="h-auto w-1/5" />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|