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 { 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>
|
||||||
|
|||||||
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