feat: logout button

src/components/task.module.scss

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

src/components/task.tsx

@@ -0,0 +1,12 @@
+import { FunctionComponent } from "preact";
+import classes from "./task.module.scss";
+
+interface TaskProps {
+  name: string;
+}
+
+const Task: FunctionComponent<TaskProps> = ({ name }: TaskProps) => {
+  return <div class={classes.task}>{name}</div>;
+};
+
+export default Task;

src/components/ui/Button.module.scss

@@ -1,5 +1,5 @@
 @reference '../../index.scss';
 
 .button {
-  @apply rounded-2xl border-2 py-3 font-semibold text-white transition-colors hover:cursor-pointer;
+  @apply rounded-2xl border-2 px-4 py-3 font-semibold text-white transition-colors hover:cursor-pointer;
 }

src/components/ui/Button.tsx

@@ -13,10 +13,10 @@ const button = tv({
 
 interface ButtonProps {
   color?: "primary" | "secondary";
-  onClick: () => void;
+  onClick?: () => void;
 }
 
-const Button: FunctionComponent<ButtonProps> = ({ children, onClick, color = "primary" }) => {
+const Button: FunctionComponent<ButtonProps> = ({ children, onClick = () => {}, color = "primary" }) => {
   return (
     <button type="button" class={button({ color: color })} onClick={onClick}>
       {children}

src/pages/profile.tsx

@@ -8,80 +8,8 @@ const ProfilePage: FunctionComponent = () => {
     <div class="flex h-screen flex-col md:flex-row">
       <div class="flex-1 overflow-y-auto px-3 pb-20 break-all md:pb-0">
         <Router>
-          <Route
-            path="/settings"
-            component={() => (
-              <p class="text-2xl">
-                information sets circus station three entirely outer fun event free thirty breathing race snow planned
-                surface fully he cast town group plant egg journeyearly city thread fight outline wear key flame special
-                voice carefully exactly entire notice practical biggest television find particular middle noise cloud
-                tobacco cameraowner rule factor lift within order somewhere rocky powerful steam expect forty tonight
-                son front motor knowledge law easily equipment worse adult straw declaredhave famous choose ants us
-                broke warn prevent follow depth been buffalo bag classroom before term repeat want here plant division
-                camera hang preparechurch call member it build rose who potatoes easy sides exclaimed foot independent
-                point alone gone forty completely habit slept heard stand forest paperjoy repeat shot wrote label giving
-                whale quick tomorrow feathers additional active unless reader angle copy blanket white pitch my seeing
-                instant result asideexcited front word guess each wolf leader steady rhyme sound thy chapter during
-                electricity available managed comfortable eight left scientist article which stove term information sets
-                circus station three entirely outer fun event free thirty breathing race snow planned surface fully he
-                cast town group plant egg journeyearly city thread fight outline wear key flame special voice carefully
-                exactly entire notice practical biggest television find particular middle noise cloud tobacco
-                cameraowner rule factor lift within order somewhere rocky powerful steam expect forty tonight son front
-                motor knowledge law easily equipment worse adult straw declaredhave famous choose ants us broke warn
-                prevent follow depth been buffalo bag classroom before term repeat want here plant division camera hang
-                preparechurch call member it build rose who potatoes easy sides exclaimed foot independent point alone
-                gone forty completely habit slept heard stand forest paperjoy repeat shot wrote label giving whale quick
-                tomorrow feathers additional active unless reader angle copy blanket white pitch my seeing instant
-                result asideexcited front word guess each wolf leader steady rhyme sound thy chapter during electricity
-                available managed comfortable eight left scientist article which stove terminformation sets circus
-                station three entirely outer fun event free thirty breathing race snow planned surface fully he cast
-                town group plant egg journeyearly city thread fight outline wear key flame special voice carefully
-                exactly entire notice practical biggest television find particular middle noise cloud tobacco
-                cameraowner rule factor lift within order somewhere rocky powerful steam expect forty tonight son front
-                motor knowledge law easily equipment worse adult straw declaredhave famous choose ants us broke warn
-                prevent follow depth been buffalo bag classroom before term repeat want here plant division camera hang
-                preparechurch call member it build rose who potatoes easy sides exclaimed foot independent point alone
-                gone forty completely habit slept heard stand forest paperjoy repeat shot wrote label giving whale quick
-                tomorrow feathers additional active unless reader angle copy blanket white pitch my seeing instant
-                result asideexcited front word guess each wolf leader steady rhyme sound thy chapter during electricity
-                available managed comfortable eight left scientist article which stove terminformation sets circus
-                station three entirely outer fun event free thirty breathing race snow planned surface fully he cast
-                town group plant egg journeyearly city thread fight outline wear key flame special voice carefully
-                exactly entire notice practical biggest television find particular middle noise cloud tobacco
-                cameraowner rule factor lift within order somewhere rocky powerful steam expect forty tonight son front
-                motor knowledge law easily equipment worse adult straw declaredhave famous choose ants us broke warn
-                prevent follow depth been buffalo bag classroom before term repeat want here plant division camera hang
-                preparechurch call member it build rose who potatoes easy sides exclaimed foot independent point alone
-                gone forty completely habit slept heard stand forest paperjoy repeat shot wrote label giving whale quick
-                tomorrow feathers additional active unless reader angle copy blanket white pitch my seeing instant
-                result asideexcited front word guess each wolf leader steady rhyme sound thy chapter during electricity
-                available managed comfortable eight left scientist article which stove terminformation sets circus
-                station three entirely outer fun event free thirty breathing race snow planned surface fully he cast
-                town group plant egg journeyearly city thread fight outline wear key flame special voice carefully
-                exactly entire notice practical biggest television find particular middle noise cloud tobacco
-                cameraowner rule factor lift within order somewhere rocky powerful steam expect forty tonight son front
-                motor knowledge law easily equipment worse adult straw declaredhave famous choose ants us broke warn
-                prevent follow depth been buffalo bag classroom before term repeat want here plant division camera hang
-                preparechurch call member it build rose who potatoes easy sides exclaimed foot independent point alone
-                gone forty completely habit slept heard stand forest paperjoy repeat shot wrote label giving whale quick
-                tomorrow feathers additional active unless reader angle copy blanket white pitch my seeing instant
-                result asideexcited front word guess each wolf leader steady rhyme sound thy chapter during electricity
-                available managed comfortable eight left scientist article which stove terminformation sets circus
-                station three entirely outer fun event free thirty breathing race snow planned surface fully he cast
-                town group plant egg journeyearly city thread fight outline wear key flame special voice carefully
-                exactly entire notice practical biggest television find particular middle noise cloud tobacco
-                cameraowner rule factor lift within order somewhere rocky powerful steam expect forty tonight son front
-                motor knowledge law easily equipment worse adult straw declaredhave famous choose ants us broke warn
-                prevent follow depth been buffalo bag classroom before term repeat want here plant division camera hang
-                preparechurch call member it build rose who potatoes easy sides exclaimed foot independent point alone
-                gone forty completely habit slept heard stand forest paperjoy repeat shot wrote label giving whale quick
-                tomorrow feathers additional active unless reader angle copy blanket white pitch my seeing instant
-                result asideexcited front word guess each wolf leader steady rhyme sound thy chapter during electricity
-                available managed comfortable eight left scientist article which stove term
-              </p>
-            )}
-          />
-          <Route path="/tasks" component={() => <p class="text-2xl">Tasks</p>} />
+          <Route path="/settings" component={lazy(() => import("./profile_settings"))} />
+          <Route path="/tasks" component={lazy(() => import("./profile_tasks"))} />
           <Route path="/calendar" component={lazy(() => import("./calendar"))} />
           <Route
             default

src/pages/profile_settings.module.scss

@@ -0,0 +1,16 @@
+@reference "../index.scss";
+
+.container {
+  @apply flex h-full w-full flex-col items-center gap-4 px-6 pt-3;
+}
+
+.header_block {
+  @apply flex h-[12rem] w-full flex-row justify-between;
+}
+
+.header_block__name {
+  @apply mt-5 flex w-full flex-col items-center justify-start gap-3;
+}
+.settings_block {
+  @apply flex h-full w-full flex-col items-center justify-center;
+}

src/pages/profile_settings.tsx

@@ -0,0 +1,39 @@
+import Button from "@/components/ui/Button";
+import { useAppContext } from "@/providers/AuthProvider";
+import { FunctionComponent } from "preact";
+import { useLocation } from "preact-iso";
+import classes from "./profile_settings.module.scss";
+
+const ProfileSettings: FunctionComponent = () => {
+  const { isLoggedIn } = useAppContext();
+  const { route } = useLocation();
+  return (
+    <div class={classes.container}>
+      <div class={classes.header_block}>
+        {/* Вынести классы в стили */}
+        <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="flex w-[300px] flex-col gap-10">
+          <Button>Сменить тему</Button>
+          <Button>Настройки</Button>
+          <Button
+            color="secondary"
+            onClick={() => {
+              isLoggedIn.value = false;
+              route("/login", true);
+            }}
+          >
+            Выйти
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfileSettings;

src/pages/profile_tasks.module.scss

@@ -0,0 +1,13 @@
+@reference "../index.scss";
+
+.container {
+  @apply flex h-full w-full flex-col items-center gap-4 px-6 pt-3;
+}
+
+.header {
+  @apply mb-12 w-full text-3xl font-semibold md:text-5xl;
+}
+
+.tasks_container {
+  @apply flex w-full flex-col items-center gap-10 md:items-start;
+}

src/pages/profile_tasks.tsx

@@ -0,0 +1,26 @@
+import Task from "@/components/task";
+import { FunctionComponent } from "preact";
+import { 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"];
+
+const ProfileTasks: FunctionComponent = () => {
+  const getDate = useMemo(() => {
+    const date = new Date();
+    const formatter = new Intl.DateTimeFormat("ru-RU", { month: "long", day: "numeric" });
+    return formatter.format(date);
+  }, []);
+  return (
+    <div class={classes.container}>
+      <div class={classes.header}>Сегодня: {getDate}</div>
+      <div class={classes.tasks_container}>
+        {example_tasks.map((task, index) => (
+          <Task name={task} key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ProfileTasks;