VEES 16 | Сделать страницу "Настройки"

.gitignore

@@ -2,4 +2,5 @@
 /.vscode
 /.next
 /.env
-/next-env.d.ts
+/next-env.d.ts
+/tsconfig.tsbuildinfo

eslint.config.mjs

@@ -34,6 +34,8 @@ const eslintCommonRules = {
   ],
   // https://eslint.org/docs/latest/rules/no-console
   'no-console': ['error', { allow: ['warn', 'info', 'error'] }],
+  // Запретить использование пустых функций
+  'no-empty-function': 'error',
   // Форматирование объектов
   'object-property-newline': ['error', { allowAllPropertiesOnSameLine: true }],
   // https://eslint.org/docs/latest/rules/padding-line-between-statements

package.json

@@ -6,7 +6,7 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint && npx stylelint \"**/*.scss\""
+    "lint": "next lint && npx stylelint \"**/*.scss\" && tsc --noEmit"
   },
   "dependencies": {
     "axios": "^1.7.9",

src/app/(with-navbar)/layout.tsx

@@ -0,0 +1,14 @@
+import { Navbar } from '@/widgets/Navbar/client';
+
+interface INavbarLayout {
+  children: React.ReactNode
+}
+
+const NavbarLayout = ({ children }: INavbarLayout) => (
+  <>
+    {children}
+    <Navbar />
+  </>
+);
+
+export default NavbarLayout;

src/app/page.tsx → src/app/(with-navbar)/page.tsx

@@ -1,13 +1,12 @@
 import { Headers } from '@/widgets/Headers';
 import { InfoBlock } from '@/widgets/InfoBlock/client';
 import { mockInfoBlockExercisesItems } from '@/widgets/InfoBlock/model/mock-exercises';
-import { Navbar } from '@/widgets/Navbar/client';
 
 import { Layout } from '@/shared/ui';
 
 const Home = () => (
   <>
-    <Headers.AllVees />
+    <Headers.Main />
     <main>
       <Layout>
         <InfoBlock
@@ -17,7 +16,6 @@ const Home = () => (
         />
       </Layout>
     </main>
-    <Navbar />
   </>
 );
 

src/app/(with-navbar)/settings/page.module.scss

@@ -0,0 +1,5 @@
+.layout {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}

src/app/(with-navbar)/settings/page.tsx

@@ -0,0 +1,28 @@
+import { Headers } from '@/widgets/Headers';
+import { Navbar } from '@/widgets/Navbar/client';
+
+import { Layout } from '@/shared/ui';
+
+import { SettingsContent } from './ui/SettingsContent';
+
+import styles from './page.module.scss';
+
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'Vees My | Настройки',
+};
+
+const Settings = () => (
+  <>
+    <Headers.Settings />
+    <main>
+      <Layout className={styles.layout}>
+        <SettingsContent />
+      </Layout>
+    </main>
+    <Navbar />
+  </>
+);
+
+export default Settings;

src/app/(with-navbar)/settings/ui/SettingsContent.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import {
+  ExportOutlineIcon,
+  FlashOutlineIcon,
+  FolderOutlineIcon,
+  ImportOutlineIcon,
+  LangIcon,
+  ThemeIcon,
+  VeesIcon,
+} from '@/shared/icons';
+import { Button, Section } from '@/shared/ui';
+
+import styles from './settingsContent.module.scss';
+
+export const SettingsContent = () => (
+  <>
+    <Section
+      items={[
+        {
+          color: '#1A80E5',
+          icon: <VeesIcon height={26} width={26} />,
+          onClick: () => { /* void */ },
+          title: 'Тренировки',
+        },
+        {
+          color: '#FFB21A',
+          icon: <FolderOutlineIcon />,
+          onClick: () => { /* void */ },
+          title: 'Настроить группы',
+        },
+        {
+          color: '#FA4838',
+          icon: <FlashOutlineIcon />,
+          onClick: () => { /* void */ },
+          title: 'Упражнения',
+        },
+      ]}
+    />
+    <Section
+      items={[
+        {
+          color: '#553FA6',
+          icon: <LangIcon />,
+          onClick: () => { /* void */ },
+          rightText: 'Русский',
+          title: 'Язык',
+        },
+        {
+          color: '#5AADF2',
+          icon: <ThemeIcon />,
+          onClick: () => { /* void */ },
+          rightText: 'Как в системе',
+          title: 'Оформление',
+        },
+      ]}
+    />
+    <Section
+      items={[
+        {
+          color: '#39C680',
+          description: 'Загрузить файл',
+          icon: <ImportOutlineIcon />,
+          onClick: () => { /* void */ },
+          title: 'Импорт настроек',
+        },
+        {
+          color: '#D15347',
+          description: 'Сохранить файл',
+          icon: <ExportOutlineIcon />,
+          onClick: () => { /* void */ },
+          title: 'Экспорт настроек',
+        },
+      ]}
+    />
+    <Button
+      className={styles.logout}
+      color="red"
+      disabled={true}
+      full={true}
+      size="large"
+      variant="bordered"
+    >
+      Выйти с аккаунта
+    </Button>
+  </>
+);

src/app/(with-navbar)/settings/ui/settingsContent.module.scss

@@ -0,0 +1,3 @@
+.logout {
+  animation: var(--anim-scale-in);
+}

src/app/globals.scss

@@ -29,4 +29,8 @@ body {
   &:hover {
     background: theme('colors.base.100');
   }
+}
+
+:disabled {
+  cursor: not-allowed;
 }

src/app/layout.tsx

@@ -1,6 +1,8 @@
 import { Inter } from 'next/font/google';
 import { ThemeProvider } from 'next-themes';
 
+import { Light } from '@/shared/ui';
+
 import type { Metadata } from 'next';
 
 import './globals.scss';
@@ -26,6 +28,7 @@ const RootLayout = ({ children }: IRootLayout) => (
       <body className={inter.className}>
         <ThemeProvider attribute="data-mode">
           {children}
+          <Light />
           <div id="modal-root" />
         </ThemeProvider>
       </body>

src/app/loading.module.scss

@@ -0,0 +1,24 @@
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+  height: 100vh;
+}
+
+.animation {
+	animation: var(--anim-scale-fade-in);
+}
+
+.content {
+	position: relative;
+}
+
+.loading {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+
+	transform: translate(-50%, -50%);
+}

src/app/loading.tsx

@@ -0,0 +1,22 @@
+import { clsx } from 'clsx';
+
+import { LogoIcon } from '@/shared/icons';
+import { Loading as LoadingComponent, Text } from '@/shared/ui';
+
+import styles from './loading.module.scss';
+
+const Loading = () => (
+  <section className={styles.wrapper}>
+    <div className={clsx(styles.content, styles.animation)}>
+      <LoadingComponent
+        className={styles.loading}
+        color="text-base-50"
+        size="large"
+      />
+      <LogoIcon height={84} width={84} />
+    </div>
+    <Text align="text-center" className={styles.animation}>Загрузка...</Text>
+  </section>
+);
+
+export default Loading;

src/app/not-found.module.scss

@@ -0,0 +1,3 @@
+.wrapper {
+  height: 100vh;
+}

src/app/not-found.tsx

@@ -0,0 +1,31 @@
+import { AppRoutes } from '@/shared/constants';
+import { ArrowLeftIcon } from '@/shared/icons';
+import { Button, Flex, Text } from '@/shared/ui';
+
+import styles from './not-found.module.scss';
+
+const NotFound = () => (
+  <Flex
+    align="center"
+    className={styles.wrapper}
+    full={true}
+    gap={48}
+    justify="center"
+    vertical={true}
+  >
+    <Flex align="center" vertical={true}>
+      <Text size={3} weight="font-bold">404</Text>
+      <Text align="text-center" as="h1" size="text-lg">Такой страницы не существует</Text>
+    </Flex>
+    <Button
+      icon={<ArrowLeftIcon />}
+      size="large"
+      to={AppRoutes.MAIN}
+      variant="solid"
+    >
+      Вернуться на главную
+    </Button>
+  </Flex>
+);
+
+export default NotFound;

src/app/vees/page.tsx

@@ -8,7 +8,7 @@ import { Layout } from '@/shared/ui';
 
 import { Timer } from '@/features/Timer/client';
 
-const Home = () => (
+const Vees = () => (
   <>
     <Headers.ExercisesList />
     <main>
@@ -23,4 +23,4 @@ const Home = () => (
   </>
 );
 
-export default Home;
+export default Vees;

src/features/Timer/client.ts

@@ -1 +1 @@
-export { Timer } from './Timer';
+export { Timer } from './ui/Timer';

src/features/Timer/model/store.ts

@@ -0,0 +1 @@
+// TODO: use zustand for store

src/shared/constants/routes.ts

@@ -1,5 +1,5 @@
 export enum AppRoutes {
-  ALL_VEES = '/all-vees',
+  MAIN = '/',
   VEES = '/vees',
   SETTINGS = '/settings',
   // last

src/shared/icons/export-outline.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Icon, IIcon } from '@/shared/ui';
+
+export const ExportOutlineIcon = ({
+  fill = 'currentColor',
+  height = 28,
+  width = 28,
+}: IIcon) => (
+  <Icon height={height} viewBox="0 0 28 28" width={width}>
+    <path
+      d="M4 11.5L6.57143 14M4 11.5L6.57143 9M4 11.5H8.68571C11.2457 11.5 12.5257 11.5 13.504 11.9844C14.3641 12.4105 15.0634 13.0904 15.5017 13.9267C16 14.8778 16 16.1222 16 18.6111V19"
+      stroke={fill}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M23 10H19.1574C18.8504 10 18.5561 9.87806 18.339 9.661C18.1219 9.44395 18 9.14956 18 8.84259V5C18.4317 5.19676 18.7546 5.5463 19.0845 5.87616L22.1238 8.91551C22.4537 9.24537 22.8044 9.56829 23 10Z"
+      fill={fill}
+    />
+    <path
+      d="M9 10.8939C9 11.1212 9.0878 11.3393 9.24408 11.5C9.40036 11.6607 9.61232 11.7511 9.83333 11.7511C10.0543 11.7511 10.2663 11.6607 10.4226 11.5C10.5789 11.3393 10.6667 11.1212 10.6667 10.8939H9ZM10.6667 16.2857C10.6667 16.0584 10.5789 15.8404 10.4226 15.6797C10.2663 15.5189 10.0543 15.4286 9.83333 15.4286C9.61232 15.4286 9.40036 15.5189 9.24408 15.6797C9.0878 15.8404 9 16.0584 9 16.2857H10.6667ZM22.9666 10.0001V10.8572C23.106 10.8572 23.2432 10.8212 23.3656 10.7526C23.488 10.684 23.5917 10.5848 23.6672 10.4643C23.7427 10.3438 23.7876 10.2057 23.7978 10.0627C23.8079 9.91968 23.7831 9.77633 23.7255 9.64577L22.9666 10.0001ZM18.1666 5.06293L18.5111 4.28236C18.3841 4.22309 18.2448 4.19753 18.1057 4.20801C17.9667 4.21848 17.8324 4.26467 17.7153 4.34233C17.5981 4.42 17.5017 4.52666 17.435 4.65255C17.3682 4.77844 17.3333 4.91954 17.3333 5.06293H18.1666ZM19.611 22.2857H13.3889V24H19.611V22.2857ZM13.3889 5.71436H16.6944V4.00008H13.3889V5.71436ZM22.3333 11.5143V19.4857H23.9999V11.5143H22.3333ZM18.6188 6.53378L21.5355 9.53491L22.7144 8.32349L19.7977 5.32236L18.6188 6.53378ZM10.6667 10.8939L10.6667 8.51434H9V10.8939H10.6667ZM10.6667 19.4857V16.2857H9V19.4857H10.6667ZM21.5355 9.53491C21.9488 9.95891 22.0544 10.0766 22.1288 10.2001L23.5499 9.3052C23.3488 8.96691 23.071 8.69034 22.7144 8.32349L21.5355 9.53491ZM19.7977 5.32236C19.4411 4.95664 19.1711 4.67093 18.8422 4.46293L17.9722 5.92578C18.0922 6.00121 18.2055 6.10864 18.6188 6.53378L19.7977 5.32236ZM16.6944 5.71436C17.3355 5.71436 17.6688 5.73493 17.9722 5.92578L18.8422 4.46293C18.0788 3.98293 17.2677 4.00008 16.6933 4.00008L16.6944 5.71436ZM23.9999 11.5143C23.9999 10.9246 24.0177 10.0903 23.5499 9.3052L22.1288 10.2001C22.3155 10.5121 22.3333 10.8549 22.3333 11.5143H23.9999ZM22.9666 9.14291H19.2777V10.8572H22.9666V9.14291ZM18.9999 8.8572V5.06293H17.3333V8.8572H18.9999ZM19.2777 9.14291C19.204 9.14291 19.1334 9.11281 19.0813 9.05923C19.0292 9.00565 18.9999 8.93298 18.9999 8.8572H17.3333C17.3333 9.9612 18.2044 10.8572 19.2777 10.8572V9.14291ZM17.8222 5.84235C18.0666 5.95664 18.2566 6.16121 18.6188 6.53378L19.7966 5.32236C19.5244 5.04122 19.0955 4.55665 18.5111 4.28236L17.8222 5.84235ZM21.5355 9.53491C21.8977 9.90748 22.0966 10.1029 22.2088 10.3555L23.7255 9.64577C23.4588 9.04577 22.9877 8.60463 22.7144 8.32349L21.5355 9.53491ZM13.3889 22.2857C12.1344 22.2857 11.5378 22.072 11.22 21.7566C10.9089 21.448 10.6667 20.8423 10.6667 19.4857H9C9 20.9532 9.24222 22.176 10.0633 22.9897C10.8767 23.7977 12.0578 24 13.3889 24V22.2857ZM22.3333 19.4857C22.3333 20.776 22.1255 21.3897 21.8188 21.7166C21.5188 22.0366 20.9299 22.2857 19.611 22.2857V24C21.0377 24 22.2266 23.7509 23.0177 22.9063C23.8032 22.0697 23.9999 20.8549 23.9999 19.4857H22.3333ZM10.6667 8.51434C10.6667 7.22406 10.8744 6.61035 11.1811 6.2835C11.4811 5.9635 12.07 5.71436 13.3889 5.71436V4.00008C11.9622 4.00008 10.7733 4.24922 9.98111 5.09379C9.19667 5.93035 9 7.14521 9 8.51434H10.6667Z"
+      fill={fill}
+    />
+  </Icon>
+);

src/shared/icons/flash-outline.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Icon, IIcon } from '@/shared/ui';
+
+export const FlashOutlineIcon = ({
+  fill = 'currentColor',
+  height = 28,
+  strokeWidth = 1.5,
+  width = 28,
+}: IIcon) => (
+  <Icon height={height} viewBox="0 0 28 28" width={width}>
+    <path
+      d="M12.3357 16.038H13.8472V20.9609C13.8472 21.4221 13.8472 21.8149 13.877 22.0962C13.8924 22.2374 13.92 22.404 13.9873 22.553C14.0323 22.66 14.1019 22.755 14.1905 22.8301C14.2791 22.9053 14.3841 22.9585 14.497 22.9855C14.6109 23.0084 14.7286 23.0042 14.8406 22.9731C14.9525 22.942 15.0556 22.885 15.1414 22.8067C15.2567 22.6995 15.3549 22.5752 15.4326 22.4382C15.5783 22.1955 15.7427 21.8391 15.9368 21.421L15.9523 21.389L18.9643 14.8796L18.9841 14.8387C19.2942 14.1691 19.5534 13.6097 19.688 13.154C19.8271 12.6796 19.8734 12.182 19.5832 11.7264C19.2931 11.2718 18.8208 11.1052 18.3321 11.0324C17.8621 10.9629 17.2453 10.9629 16.5072 10.9629H14.9505V6.04C14.9505 5.57882 14.9505 5.18605 14.9207 4.90471C14.9074 4.74772 14.8702 4.59369 14.8104 4.44795C14.7654 4.34089 14.6958 4.24593 14.6072 4.17079C14.5186 4.09565 14.4136 4.04244 14.3007 4.01546C14.1868 3.99161 14.0689 3.9954 13.9568 4.0265C13.8447 4.05759 13.7417 4.1151 13.6563 4.19419C13.541 4.30146 13.4428 4.42573 13.3651 4.56269C13.2194 4.80542 13.055 5.16178 12.8609 5.57993L12.8454 5.61192L9.83344 12.1213L9.81358 12.1622C9.50355 12.8319 9.24428 13.3912 9.10968 13.8469C8.97066 14.3213 8.92322 14.8189 9.21449 15.2745C9.50466 15.7291 9.97686 15.8957 10.4656 15.9685C10.9356 16.038 11.5524 16.038 12.2905 16.038H12.3357Z"
+      stroke={fill}
+      strokeWidth={strokeWidth}
+    />
+  </Icon>
+);