69 lines
2.0 KiB
TypeScript
69 lines
2.0 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import Button from "../components/Input/Button";
|
|
|
|
const NotFoundPage: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const [stars, setStars] = useState<{ x: number; y: number }[]>([]);
|
|
const starSize = 20;
|
|
|
|
useEffect(() => {
|
|
const loop = setInterval(() => {
|
|
if (Math.random() < 0.1) {
|
|
const newStar = {
|
|
x: Math.random() * (window.innerWidth - starSize),
|
|
y: -starSize,
|
|
};
|
|
setStars((prev) => [...prev, newStar]);
|
|
}
|
|
|
|
setStars((prev) => {
|
|
const newStars = prev.filter((star) => {
|
|
if (
|
|
star.y > window.innerHeight - starSize &&
|
|
star.y < window.innerHeight
|
|
) {
|
|
return false;
|
|
}
|
|
if (star.y > window.innerHeight) return false;
|
|
return true;
|
|
});
|
|
|
|
return newStars.map((star) => ({
|
|
...star,
|
|
y: star.y + 5,
|
|
}));
|
|
});
|
|
}, 10);
|
|
|
|
return () => clearInterval(loop);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="h-screen w-screen bg-gray-900 text-white overflow-hidden relative">
|
|
<div>
|
|
{stars.map((star, index) => (
|
|
<div
|
|
key={index}
|
|
className="absolute w-5 h-5 text-yellow-300"
|
|
style={{ left: `${star.x}px`, top: `${star.y}px` }}
|
|
>
|
|
★
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="absolute flex justify-center items-center h-full z-0 inset-0 bg-[radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] bg-[length:50px_50px]">
|
|
<div className="w-full text-center animate-floating">
|
|
<h1 className="text-6xl font-bold mb-4">404</h1>
|
|
<p className="text-2xl mb-8">Page Not Found</p>
|
|
<Button extraClasses="z-[100]" onClick={() => navigate("/")}>
|
|
Go Home
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotFoundPage;
|