feat: 404 page

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");
+  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() {
@@ -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>

src/components/task.module.scss

@@ -1,5 +1,5 @@
 @reference "../index.scss";
 
 .task {
-  @apply flex h-24 w-[300px] flex-col items-center justify-center rounded-md border-2 text-xl md:w-[500px];
+  @apply flex h-24 w-[300px] cursor-pointer flex-col items-center justify-center rounded-md border-2 text-xl transition-transform hover:scale-[1.05] active:scale-[1.05] md:w-[500px];
 }

src/components/task.tsx

@@ -6,7 +6,12 @@ interface TaskProps {
 }
 
 const Task: FunctionComponent<TaskProps> = ({ name }: TaskProps) => {
-  return <div class={classes.task}>{name}</div>;
+  return (
+    // Временное действие для тестирования
+    <button onClick={() => alert(name)}>
+      <div class={classes.task}>{name}</div>
+    </button>
+  );
 };
 
 export default Task;

src/enums/urls.ts

@@ -0,0 +1,7 @@
+export enum UrlsTitle {
+  LOGIN = "Авторизация",
+  PROFILE = "Профиль",
+  TASKS = "Задачи",
+  CALENDAR = "Календарь",
+  PAGE404 = "404",
+}

src/index.scss

@@ -3,3 +3,19 @@
 :root {
   font-family: "Montserrat", sans-serif;
 }
+
+@layer base {
+  ::-webkit-scrollbar {
+    @apply w-2;
+  }
+  ::-webkit-scrollbar-track {
+    @apply bg-gray-100;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    @apply rounded-full bg-gray-300;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500;
+  }
+}

src/pages/404.module.scss

@@ -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;
+}

src/pages/404.tsx

@@ -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;

src/pages/calendar.tsx

@@ -1,6 +1,7 @@
+import { UrlsTitle } from "@/enums/urls";
 import { cn } from "@/utils/class-merge";
 import { FunctionComponent, h } from "preact";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 
 type MarkedDateType = "event" | "holiday" | "important" | string;
 type MarkedDates = Record<string, MarkedDateType>;
@@ -16,6 +17,9 @@ const BigCalendar: FunctionComponent<BigCalendarProps> = ({
   markedDates = {},
   className = "",
 }: BigCalendarProps) => {
+  useEffect(() => {
+    document.title = UrlsTitle.CALENDAR;
+  }, []);
   const [currentDate, setCurrentDate] = useState<Date>(new Date());
   const [selectedDate, setSelectedDate] = useState<Date | null>(null);
 

src/pages/login.tsx

@@ -1,12 +1,17 @@
 import Button from "@/components/ui/Button";
 import Input from "@/components/ui/Input";
+import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect } from "preact/hooks";
 import classes from "./login.module.scss";
 const LoginPage: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
+  useEffect(() => {
+    document.title = UrlsTitle.LOGIN;
+  }, []);
   return (
     <div class={classes.login_container}>
       <div class={classes.login_card}>
@@ -16,7 +21,7 @@ const LoginPage: FunctionComponent = () => {
         <Button
           onClick={() => {
             isLoggedIn.value = true;
-            route("/profile/settings", true);
+            route("/profile/tasks", true);
           }}
         >
           Login

src/pages/profile.module.scss

@@ -1 +1,13 @@
 @reference "../index.scss";
+
+#main_container {
+  @apply flex h-screen flex-col md:flex-row;
+}
+
+#router_container {
+  @apply flex-1 overflow-y-auto px-3 pb-[6rem] break-all md:pb-5;
+}
+
+#menu_container {
+  @apply md:sticky md:top-0 md:h-screen;
+}

src/pages/profile.tsx

@@ -1,12 +1,13 @@
 import Menu from "@/components/menu";
 import { FunctionComponent } from "preact";
 import { lazy, Route, Router, useLocation } from "preact-iso";
+import ids from "./profile.module.scss";
 
 const ProfilePage: FunctionComponent = () => {
   const { route } = useLocation();
   return (
-    <div class="flex h-screen flex-col md:flex-row">
+    <div id={ids.main_container}>
-      <div class="flex-1 overflow-y-auto px-3 pb-20 break-all md:pb-0">
+      <div id={ids.router_container}>
         <Router>
           <Route path="/settings" component={lazy(() => import("./profile_settings"))} />
           <Route path="/tasks" component={lazy(() => import("./profile_tasks"))} />
@@ -20,7 +21,7 @@ const ProfilePage: FunctionComponent = () => {
           />
         </Router>
       </div>
-      <div className="md:sticky md:top-0 md:h-screen">
+      <div id={ids.menu_container}>
         <Menu />
       </div>
     </div>

src/pages/profile_settings.module.scss

@@ -1,16 +1,24 @@
 @reference "../index.scss";
 
 .container {
-  @apply flex h-full w-full flex-col items-center gap-4 px-6 pt-3;
+  @apply flex h-full w-full flex-col items-center px-6 pt-3 md:flex-row md:items-start;
 }
 
-.header_block {
+#avatar {
-  @apply flex h-[12rem] w-full flex-row justify-between;
+  @apply flex aspect-square h-40 flex-col items-center justify-center rounded-md border;
+}
+
+.profile_container {
+  @apply flex h-full w-full flex-col items-center;
+}
+
+.settings_block__buttons {
+  @apply flex w-[300px] flex-col gap-10;
 }
 
 .header_block__name {
-  @apply mt-5 flex w-full flex-col items-center justify-start gap-3;
+  @apply mt-5 flex h-fit w-full flex-col items-center justify-start gap-3;
 }
 .settings_block {
-  @apply flex h-full w-full flex-col items-center justify-center;
+  @apply mt-12 flex h-full w-full flex-col items-center justify-start md:mt-0 md:justify-center;
 }

src/pages/profile_settings.tsx

@@ -1,35 +1,40 @@
 import Button from "@/components/ui/Button";
+import { UrlsTitle } from "@/enums/urls";
 import { useAppContext } from "@/providers/AuthProvider";
 import { FunctionComponent } from "preact";
 import { useLocation } from "preact-iso";
+import { useEffect } from "preact/hooks";
 import classes from "./profile_settings.module.scss";
 
 const ProfileSettings: FunctionComponent = () => {
   const { isLoggedIn } = useAppContext();
   const { route } = useLocation();
+  useEffect(() => {
+    document.title = UrlsTitle.PROFILE;
+  }, []);
   return (
     <div class={classes.container}>
-      <div class={classes.header_block}>
+      <div id={classes.avatar}>Аватар</div>
-        {/* Вынести классы в стили */}
+      <div class={classes.profile_container}>
-        <div class="flex aspect-square h-full flex-col items-center justify-center rounded-md border">Аватар</div>
         <div class={classes.header_block__name}>
           <p class="text-5xl font-semibold">Никнейм</p>
           <p class="text-2xl font-light">Статус</p>
         </div>
-      </div>
+
-      <div class={classes.settings_block}>
+        <div class={classes.settings_block}>
-        <div class="flex w-[300px] flex-col gap-10">
+          <div class={classes.settings_block__buttons}>
-          <Button>Сменить тему</Button>
+            <Button>Сменить тему</Button>
-          <Button>Настройки</Button>
+            <Button>Настройки</Button>
-          <Button
+            <Button
-            color="secondary"
+              color="secondary"
-            onClick={() => {
+              onClick={() => {
-              isLoggedIn.value = false;
+                isLoggedIn.value = false;
-              route("/login", true);
+                route("/login", true);
-            }}
+              }}
-          >
+            >
-            Выйти
+              Выйти
-          </Button>
+            </Button>
+          </div>
         </div>
       </div>
     </div>

src/pages/profile_tasks.module.scss

@@ -1,7 +1,7 @@
 @reference "../index.scss";
 
 .container {
-  @apply flex h-full w-full flex-col items-center gap-4 px-6 pt-3;
+  @apply flex h-fit w-full flex-col items-center gap-4 px-6 pt-3;
 }
 
 .header {

src/pages/profile_tasks.tsx

@@ -1,6 +1,7 @@
 import Task from "@/components/task";
+import { UrlsTitle } from "@/enums/urls";
 import { FunctionComponent } from "preact";
-import { useMemo } from "preact/hooks";
+import { useEffect, useMemo } from "preact/hooks";
 import classes from "./profile_tasks.module.scss";
 
 const example_tasks = ["Test 1", "Test 2", "Test 3", "Test 4", "Test 5", "Test 6", "Test 7", "Test 8"];
@@ -11,6 +12,9 @@ const ProfileTasks: FunctionComponent = () => {
     const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
     return formatter.format(date);
   }, []);
+  useEffect(() => {
+    document.title = UrlsTitle.TASKS;
+  }, []);
   return (
     <div class={classes.container}>
       <div class={classes.header}>Сегодня: {getDate}</div>