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 = {