feat: proto-profile page

src/pages/profile.tsx

@@ -8,79 +8,7 @@ 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
+          <Route path="/settings" component={lazy(() => import("./profile_settings"))} />
-            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="/calendar" component={lazy(() => import("./calendar"))} />
           <Route

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,27 @@
+import Button from "@/components/ui/Button";
+import { FunctionComponent } from "preact";
+import classes from "./profile_settings.module.scss";
+
+const ProfifleSettings: FunctionComponent = () => {
+  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">Выйти</Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProfifleSettings;