Components: create Calculation Component

add Calculation Component to Home page

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']],

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,
+};

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',

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,
+};

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;

Components/Calculation/index.js

@@ -0,0 +1,5 @@
+import Form from './Form';
+
+export default function Calculation() {
+  return <Form />;
+}

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']]
   >;

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;

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;
+  }
+`;

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