From e9ca1cc752d4dfdfe68e48d69c4c5a299ac1377b Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Tue, 2 Jul 2024 18:03:10 +0300
Subject: [PATCH] add background to validation tab

---
 .../Calculation/Validation/index.jsx          | 19 +++++++++++++++++++
 apps/web/Components/Calculation/index.tsx     |  8 ++++----
 2 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/Components/Calculation/Validation/index.jsx

diff --git a/apps/web/Components/Calculation/Validation/index.jsx b/apps/web/Components/Calculation/Validation/index.jsx
new file mode 100644
index 0000000..98513b3
--- /dev/null
+++ b/apps/web/Components/Calculation/Validation/index.jsx
@@ -0,0 +1,19 @@
+import Validation from '../Output/Validation';
+import Background from '@/Components/Layout/Background';
+import { min } from '@/styles/mq';
+import { memo } from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled(Background)`
+  padding: 4px 10px;
+
+  ${min('laptop')} {
+    padding: 4px 18px;
+  }
+`;
+
+export const Component = memo(() => (
+  <Wrapper>
+    <Validation.Component />
+  </Wrapper>
+));
diff --git a/apps/web/Components/Calculation/index.tsx b/apps/web/Components/Calculation/index.tsx
index 2752341..8734a56 100644
--- a/apps/web/Components/Calculation/index.tsx
+++ b/apps/web/Components/Calculation/index.tsx
@@ -1,8 +1,8 @@
 import { Form } from './Form';
 import { Layout } from './Layout';
 import { Output } from './Output';
-import Validation from './Output/Validation';
 import { Settings } from './Settings';
+import { Component as Validation } from './Validation';
 import { Notification } from '@/Components/Common';
 import { NavigationBar, Tabs } from '@/Components/Layout/Navigation';
 import { NavigationProvider } from '@/context/navigation';
@@ -38,10 +38,10 @@ export const tabs = [
     title: 'Результаты',
   },
   {
-    Component: Validation.Component,
+    Component: Validation,
     icon: <WarningOutlined style={defaultIconStyle} />,
-    key: Validation.id,
-    title: Validation.title,
+    key: 'errors',
+    title: 'Ошибки',
   },
 ];