From 6a6b8091c7281fd551bbebb5dcff7435762f1511 Mon Sep 17 00:00:00 2001
From: Sergey Elpashev <elpashevs@bk.ru>
Date: Mon, 7 Apr 2025 13:03:11 +0300
Subject: [PATCH] feat: profile tasks page

---
 src/pages/profile.tsx               |  2 +-
 src/pages/profile_tasks.module.scss | 13 +++++++++++++
 src/pages/profile_tasks.tsx         | 26 ++++++++++++++++++++++++++
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/profile_tasks.module.scss
 create mode 100644 src/pages/profile_tasks.tsx

diff --git a/src/pages/profile.tsx b/src/pages/profile.tsx
index 55350f0..cf9d61c 100644
--- a/src/pages/profile.tsx
+++ b/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
diff --git a/src/pages/profile_tasks.module.scss b/src/pages/profile_tasks.module.scss
new file mode 100644
index 0000000..cc2e463
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/profile_tasks.tsx b/src/pages/profile_tasks.tsx
new file mode 100644
index 0000000..16e922e
--- /dev/null
+++ b/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;