diff --git a/apps/web/Components/Calculation/index.tsx b/apps/web/Components/Calculation/index.tsx
index 8734a56..0c3f819 100644
--- a/apps/web/Components/Calculation/index.tsx
+++ b/apps/web/Components/Calculation/index.tsx
@@ -6,6 +6,7 @@ import { Component as Validation } from './Validation';
import { Notification } from '@/Components/Common';
import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
import { NavigationProvider } from '@/context/navigation';
+import { useErrors } from '@/stores/hooks';
import { Media } from '@/styles/media';
import { getPageTitle } from '@/utils/page';
import Head from 'next/head';
@@ -42,6 +43,11 @@ export const tabs = [
icon: ,
key: 'errors',
title: 'Ошибки',
+ useShowBadge: () => {
+ const { hasErrors } = useErrors();
+
+ return hasErrors;
+ },
},
];
diff --git a/apps/web/Components/Layout/Navigation.jsx b/apps/web/Components/Layout/Navigation.jsx
index d692878..30d34ee 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 { Badge } from 'ui/elements';
import { Flex } from 'ui/grid';
const Container = styled.div`
@@ -28,15 +29,19 @@ const TabButton = styled.button`
font-size: 0.75rem;
`;
+const StyledBadge = styled(Badge)`
+ color: unset !important;
+`;
+
export function NavigationBar() {
const { currentTab, setCurrentTab, tabsList } = useContext(NavigationContext);
return (
- {tabsList.map(({ icon, key, title }) => (
+ {tabsList.map(({ icon, key, title, useShowBadge }) => (
setCurrentTab(key)}>
- {icon}
+ {icon}
{title}
diff --git a/apps/web/context/navigation.tsx b/apps/web/context/navigation.tsx
index 7af95b0..d25beb1 100644
--- a/apps/web/context/navigation.tsx
+++ b/apps/web/context/navigation.tsx
@@ -4,6 +4,7 @@ type Tab = {
icon: JSX.Element;
key: string;
title: string;
+ useShowBadge?: () => boolean;
};
type NavigationContextType = {