feat: 404 page

This commit is contained in:
2025-04-07 17:06:08 +03:00
parent e6ab12f957
commit 7c6f21081f
3 changed files with 46 additions and 4 deletions

View File

@@ -1,13 +1,16 @@
import { FunctionComponent } from "preact"; import { FunctionComponent } from "preact";
import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso"; import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
import "preact/debug"; import "preact/debug";
import Page404 from "./pages/404";
import LoginPage from "./pages/login"; import LoginPage from "./pages/login";
import { AppProvider } from "./providers/AuthProvider"; import { AppProvider, useAppContext } from "./providers/AuthProvider";
const HomePage: FunctionComponent = () => { const HomePage: FunctionComponent = () => {
const { route } = useLocation(); const { route } = useLocation();
route("/login"); const { isLoggedIn } = useAppContext();
return <div>Redirecting to login...</div>; if (isLoggedIn) route("/profile/tasks", true);
else route("/login", true);
return <div>Redirecting...</div>;
}; };
export function App() { export function App() {
@@ -19,7 +22,7 @@ export function App() {
<Route path="/" component={HomePage} /> <Route path="/" component={HomePage} />
<Route path="/login" component={LoginPage} /> <Route path="/login" component={LoginPage} />
<Route path="/profile/*" component={lazy(() => import("./pages/profile"))} /> <Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
<Route default component={() => <h1>404</h1>} /> <Route default component={() => <Page404 />} />
</Router> </Router>
</ErrorBoundary> </ErrorBoundary>
</LocationProvider> </LocationProvider>

View File

@@ -0,0 +1,9 @@
@reference "../index.scss";
#container {
@apply flex h-screen w-full flex-col items-center justify-center;
}
#main_container {
@apply flex flex-col items-center gap-8;
}

30
src/pages/404.tsx Normal file
View File

@@ -0,0 +1,30 @@
import Button from "@/components/ui/Button";
import { UrlsTitle } from "@/enums/urls";
import { FunctionComponent } from "preact";
import { useLocation } from "preact-iso";
import { useEffect } from "preact/hooks";
import classes from "./404.module.scss";
const Page404: FunctionComponent = () => {
const { route } = useLocation();
useEffect(() => {
document.title = UrlsTitle.PAGE404;
}, []);
return (
<div id={classes.container}>
<div id={classes.main_container}>
<p class="text-6xl font-semibold">404</p>
<Button
onClick={() => {
route("/", true);
}}
color="secondary"
>
На главную
</Button>
</div>
</div>
);
};
export default Page404;