navigation: add tabs icons

apps/web/Components/Layout/Navigation.jsx

@@ -1,6 +1,7 @@
 import { NavigationContext } from '@/context/navigation';
 import { useContext, useEffect } from 'react';
 import styled from 'styled-components';
+import { Flex } from 'ui/grid';
 
 const Container = styled.div`
   background-color: white;
@@ -23,6 +24,7 @@ const TabButton = styled.button`
   cursor: pointer;
   height: 100%;
   width: 100%;
+  font-size: 0.75rem;
 `;
 
 export function NavigationBar() {
@@ -30,9 +32,12 @@ export function NavigationBar() {
 
   return (
     <Container>
-      {tabsList.map(({ key, title }) => (
+      {tabsList.map(({ icon, key, title }) => (
         <TabButton key={key} active={key === currentTab} onClick={() => setCurrentTab(key)}>
-          {title}
+          <Flex flexDirection="column" alignItems="center">
+            {icon}
+            {title}
+          </Flex>
         </TabButton>
       ))}
     </Container>

apps/web/context/navigation.tsx

@@ -1,6 +1,7 @@
 import { createContext, useEffect, useMemo, useState } from 'react';
 
 type Tab = {
+  icon: JSX.Element;
   key: string;
   title: string;
 };

apps/web/pages/index.jsx

@@ -10,20 +10,26 @@ import { getPageTitle } from '@/utils/page';
 import { makeGetUserType } from '@/utils/user';
 import { dehydrate, QueryClient } from '@tanstack/react-query';
 import Head from 'next/head';
+import { AreaChartOutlined, CalculatorOutlined, ProfileOutlined } from 'ui/elements/icons';
+
+const defaultIconStyle = { fontSize: '1.2rem' };
 
 export const tabs = [
-  {
-    Component: Calculation.Form,
-    key: 'form',
-    title: 'Параметры',
-  },
   {
     Component: Calculation.Settings,
+    icon: <ProfileOutlined style={defaultIconStyle} />,
     key: 'settings',
     title: 'Интерес/Расчет',
   },
+  {
+    Component: Calculation.Form,
+    icon: <CalculatorOutlined style={defaultIconStyle} />,
+    key: 'form',
+    title: 'Параметры',
+  },
   {
     Component: Calculation.Output,
+    icon: <AreaChartOutlined style={defaultIconStyle} />,
     key: 'output',
     title: 'Результаты',
   },