feat: profile tasks page

src/pages/profile.tsx

@@ -9,7 +9,7 @@ const ProfilePage: FunctionComponent = () => {
       <div class="flex-1 overflow-y-auto px-3 pb-20 break-all md:pb-0">
         <Router>
           <Route path="/settings" component={lazy(() => import("./profile_settings"))} />
-          <Route path="/tasks" component={() => <p class="text-2xl">Tasks</p>} />
+          <Route path="/tasks" component={lazy(() => import("./profile_tasks"))} />
           <Route path="/calendar" component={lazy(() => import("./calendar"))} />
           <Route
             default

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;