pixies

1import {useEffect, useState} from "react";
2import "./styles.sass";
3import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
4import {faHome, faArrowLeft} from "@fortawesome/free-solid-svg-icons";
5import {useNavigate} from "react-router-dom";
6import Button from "@/common/components/Button";
7
8export const NotFound = () => {
9    const navigate = useNavigate();
10    const [countdown, setCountdown] = useState(5);
11
12    useEffect(() => {
13        const timer = setInterval(() => {
14            setCountdown((prev) => {
15                if (prev <= 1) {
16                    clearInterval(timer);
17                    navigate("/");
18                    return 0;
19                }
20                return prev - 1;
21            });
22        }, 1000);
23
24        return () => clearInterval(timer);
25    }, [navigate]);
26
27    return (
28        <div className="not-found-page">
29            <div className="not-found-content">
30                <div className="error-code">404</div>
31                <h1>Page Not Found</h1>
32                <p>The page you're looking for doesn't exist or has been moved.</p>
33                <p className="redirect-notice">Redirecting to home in {countdown} seconds...</p>
34                
35                <div className="not-found-actions">
36                    <Button 
37                        text="Go Home" 
38                        icon={faHome} 
39                        color="primary"
40                        onClick={() => navigate("/")}
41                    />
42                    <Button 
43                        text="Go Back" 
44                        icon={faArrowLeft} 
45                        color="primary"
46                        variant="outline"
47                        onClick={() => navigate(-1)}
48                    />
49                </div>
50            </div>
51        </div>
52    );
53}