From 8d1d3fed7cc9d6129e38b7385516964f326468bb Mon Sep 17 00:00:00 2001
From: Chika <djchikalkin@gmail.com>
Date: Wed, 1 Jun 2022 20:49:46 +0300
Subject: [PATCH] Components: create Calculation Component add Calculation
 Component to Home page

---
 Components/Calculation/Form/Leasing/config.ts |  2 ++
 Components/Calculation/Form/Leasing/index.jsx |  6 ++++-
 .../Calculation/Form/Payments/config.ts       |  3 +++
 .../Calculation/Form/Payments/index.jsx       |  8 +++++--
 Components/Calculation/Form/index.jsx         | 24 +++++++++++++++++++
 Components/Calculation/index.js               |  5 ++++
 .../Calculation/lib/renderFormComponent.tsx   |  2 ++
 Elements/layout/Background.jsx                | 16 +++++++++++++
 Elements/layout/Tabs.js                       | 13 ++++++++++
 pages/index.tsx                               |  3 ++-
 10 files changed, 78 insertions(+), 4 deletions(-)
 create mode 100644 Components/Calculation/Form/index.jsx
 create mode 100644 Components/Calculation/index.js
 create mode 100644 Elements/layout/Background.jsx
 create mode 100644 Elements/layout/Tabs.js

diff --git a/Components/Calculation/Form/Leasing/config.ts b/Components/Calculation/Form/Leasing/config.ts
index b07abf4..3fe6526 100644
--- a/Components/Calculation/Form/Leasing/config.ts
+++ b/Components/Calculation/Form/Leasing/config.ts
@@ -2,6 +2,8 @@
 import type { FormComponentConfig } from '../../lib/renderFormComponent';
 
 const config: FormComponentConfig = {
+  id: 'leasing',
+  title: 'Лизинг',
   rows: [
     [['selectProduct'], { gridTemplateColumns: '1fr' }],
     [['tbxLeaseObjectPrice', 'tbxVATInLeaseObjectPrice', 'tbxLeaseObjectPriceWthtVAT']],
diff --git a/Components/Calculation/Form/Leasing/index.jsx b/Components/Calculation/Form/Leasing/index.jsx
index cf19cfc..e09823e 100644
--- a/Components/Calculation/Form/Leasing/index.jsx
+++ b/Components/Calculation/Form/Leasing/index.jsx
@@ -5,4 +5,8 @@ function Leasing() {
   return renderFormComponent(config);
 }
 
-export default Leasing;
+export default {
+  id: config.id,
+  title: config.title,
+  Component: Leasing,
+};
diff --git a/Components/Calculation/Form/Payments/config.ts b/Components/Calculation/Form/Payments/config.ts
index 341838b..9ba15f7 100644
--- a/Components/Calculation/Form/Payments/config.ts
+++ b/Components/Calculation/Form/Payments/config.ts
@@ -1,6 +1,9 @@
 /* eslint-disable import/prefer-default-export */
 import type { FormComponentConfig } from '../../lib/renderFormComponent';
 
+export const id = 'payments';
+export const title = 'Платежи';
+
 export const elements: FormComponentConfig['rows'][number][0] = [
   'radioGraphType',
   'selectSeasonType',
diff --git a/Components/Calculation/Form/Payments/index.jsx b/Components/Calculation/Form/Payments/index.jsx
index 9400924..e205da0 100644
--- a/Components/Calculation/Form/Payments/index.jsx
+++ b/Components/Calculation/Form/Payments/index.jsx
@@ -1,6 +1,6 @@
 import { Box, Flex } from 'UIKit/grid';
 import elementsRender from '../../config/elements-render';
-import { elements } from './config';
+import { elements, id, title } from './config';
 
 function Payments() {
   const renderedElements = elements.map((elementName) => {
@@ -34,4 +34,8 @@ function Payments() {
   );
 }
 
-export default Payments;
+export default {
+  id,
+  title,
+  Component: Payments,
+};
diff --git a/Components/Calculation/Form/index.jsx b/Components/Calculation/Form/index.jsx
new file mode 100644
index 0000000..478cf80
--- /dev/null
+++ b/Components/Calculation/Form/index.jsx
@@ -0,0 +1,24 @@
+import Background from 'Elements/layout/Background';
+import { Tabs, Wrapper } from 'Elements/layout/Tabs';
+import Leasing from './Leasing';
+import Payments from './Payments';
+
+const formTabs = [Leasing, Payments];
+
+function Form() {
+  return (
+    <Wrapper>
+      <Tabs type="card">
+        {formTabs.map(({ id, title, Component }) => (
+          <Tabs.TabPane tab={title} key={id} animated style>
+            <Background>
+              <Component />
+            </Background>
+          </Tabs.TabPane>
+        ))}
+      </Tabs>
+    </Wrapper>
+  );
+}
+
+export default Form;
diff --git a/Components/Calculation/index.js b/Components/Calculation/index.js
new file mode 100644
index 0000000..5f4e95e
--- /dev/null
+++ b/Components/Calculation/index.js
@@ -0,0 +1,5 @@
+import Form from './Form';
+
+export default function Calculation() {
+  return <Form />;
+}
diff --git a/Components/Calculation/lib/renderFormComponent.tsx b/Components/Calculation/lib/renderFormComponent.tsx
index c43d129..94b82af 100644
--- a/Components/Calculation/lib/renderFormComponent.tsx
+++ b/Components/Calculation/lib/renderFormComponent.tsx
@@ -6,6 +6,8 @@ import type { Elements as ComputedElements } from '../config/map/computed';
 import type { Elements as ValuesElements } from '../config/map/values';
 
 export type FormComponentConfig = {
+  id: string;
+  title: string;
   rows: Array<
     [elements: (ValuesElements | ComputedElements | ActionElements)[], style?: BoxProps['style']]
   >;
diff --git a/Elements/layout/Background.jsx b/Elements/layout/Background.jsx
new file mode 100644
index 0000000..f93333e
--- /dev/null
+++ b/Elements/layout/Background.jsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import { Box } from 'UIKit/grid';
+import { min } from 'UIKit/mq';
+
+const Background = styled(Box)`
+  background: #fff;
+
+  padding: 4px 10px;
+
+  ${min('laptop')} {
+    padding: 10px 18px;
+    box-shadow: 0px 2px 15px -11px rgba(0, 0, 0, 0.75);
+  }
+`;
+
+export default Background;
diff --git a/Elements/layout/Tabs.js b/Elements/layout/Tabs.js
new file mode 100644
index 0000000..8ee2c26
--- /dev/null
+++ b/Elements/layout/Tabs.js
@@ -0,0 +1,13 @@
+/* eslint-disable unicorn/filename-case */
+import styled from 'styled-components';
+
+export { Tabs } from 'antd';
+
+export const Wrapper = styled.div`
+  .ant-tabs-top > .ant-tabs-nav {
+    margin: 0;
+  }
+  .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab {
+    border: none;
+  }
+`;
diff --git a/pages/index.tsx b/pages/index.tsx
index 4969199..adb1cb0 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,4 +1,5 @@
 import initializeApollo from 'apollo/client';
+import Calculation from 'Components/Calculation';
 import type { GetServerSideProps } from 'next';
 import { fetchUser } from 'services/user';
 import type { BasePageProps } from 'types/page';
@@ -6,7 +7,7 @@ import type { BasePageProps } from 'types/page';
 type PageProps = BasePageProps;
 
 function Home() {
-  return <div>Home</div>;
+  return <Calculation />;
 }
 
 export const getServerSideProps: GetServerSideProps<PageProps> = async (ctx) => {