feat: 404 page
This commit is contained in:
11
src/app.tsx
11
src/app.tsx
@@ -1,13 +1,16 @@
|
||||
import { FunctionComponent } from "preact";
|
||||
import { ErrorBoundary, lazy, LocationProvider, Route, Router, useLocation } from "preact-iso";
|
||||
import "preact/debug";
|
||||
import Page404 from "./pages/404";
|
||||
import LoginPage from "./pages/login";
|
||||
import { AppProvider } from "./providers/AuthProvider";
|
||||
import { AppProvider, useAppContext } from "./providers/AuthProvider";
|
||||
|
||||
const HomePage: FunctionComponent = () => {
|
||||
const { route } = useLocation();
|
||||
route("/login");
|
||||
return <div>Redirecting to login...</div>;
|
||||
const { isLoggedIn } = useAppContext();
|
||||
if (isLoggedIn) route("/profile/tasks", true);
|
||||
else route("/login", true);
|
||||
return <div>Redirecting...</div>;
|
||||
};
|
||||
|
||||
export function App() {
|
||||
@@ -19,7 +22,7 @@ export function App() {
|
||||
<Route path="/" component={HomePage} />
|
||||
<Route path="/login" component={LoginPage} />
|
||||
<Route path="/profile/*" component={lazy(() => import("./pages/profile"))} />
|
||||
<Route default component={() => <h1>404</h1>} />
|
||||
<Route default component={() => <Page404 />} />
|
||||
</Router>
|
||||
</ErrorBoundary>
|
||||
</LocationProvider>
|
||||
|
||||
9
src/pages/404.module.scss
Normal file
9
src/pages/404.module.scss
Normal 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
30
src/pages/404.tsx
Normal 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;
|
||||
Reference in New Issue
Block a user