From 6818adf1bd7f9f9b515b6a74c0e0754218e8eec8 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Tue, 2 Jul 2024 16:45:44 +0300
Subject: [PATCH] navigation: add tabs icons

---
 apps/web/Components/Layout/Navigation.jsx |  9 +++++++--
 apps/web/context/navigation.tsx           |  1 +
 apps/web/pages/index.jsx                  | 16 +++++++++++-----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/apps/web/Components/Layout/Navigation.jsx b/apps/web/Components/Layout/Navigation.jsx
index 460319a..9546a96 100644
--- a/apps/web/Components/Layout/Navigation.jsx
+++ b/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>
diff --git a/apps/web/context/navigation.tsx b/apps/web/context/navigation.tsx
index 2530d0d..7af95b0 100644
--- a/apps/web/context/navigation.tsx
+++ b/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;
 };
diff --git a/apps/web/pages/index.jsx b/apps/web/pages/index.jsx
index da26329..cbb46ac 100644
--- a/apps/web/pages/index.jsx
+++ b/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: 'Результаты',
   },