@redneckz/wildless-cms-uni-blocks 0.14.293 → 0.14.295

package/src/components/Calculator/Calculator.fixture.mobile.tsx

@@ -74,17 +74,6 @@ export default {
               'Расчёт является предварительным. Точные условия будут предоставлены в отделении Банка.',
           },
         },
-        {
-          nav: {
-            title: 'Обменивайте баллы на путешествия',
-            icon: { icon: 'PercentageRoundIcon' },
-          },
-          calculatorBlock: {
-            title: 'Обменивайте баллы на путешествия',
-            calcType: 'BonusCalculatorForm',
-            buttons: [sendRequestButton, detailsButton],
-          },
-        },
         {
           nav: {
             title: 'Рефинансирование',
@@ -137,17 +126,4 @@ export default {
       ]}
     />
   ),
-  bonus: (
-    <Calculator
-      calculatorTabs={[
-        {
-          calculatorBlock: {
-            title: 'Обменивайте баллы на путешествия',
-            calcType: 'BonusCalculatorForm',
-            buttons: [sendRequestButton, detailsButton],
-          },
-        },
-      ]}
-    />
-  ),
 };

package/src/components/Calculator/Calculator.fixture.tsx

@@ -3,7 +3,6 @@ import '../../setup-fixture';
 import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
 import { Calculator } from './Calculator';
 import {
-  type BonusCalculatorParamsDef,
   type BusinessDepositCalculatorParamsDef,
   type CreditCalculatorParamsDef,
   type DepositCalculatorParamsDef,
@@ -97,15 +96,6 @@ const REFINANCING_CALCULATOR_BLOCK: RefinancingCalculatorParamsDef = {
   },
 };
 
-const BONUS_CALCULATOR_BLOCK: BonusCalculatorParamsDef = {
-  title: 'Обменивайте баллы на путешествия',
-  calcType: 'BonusCalculatorForm',
-  buttons: buttons,
-  calcSource: {
-    $ref: '/wcms-resources/bonus-calculator-data.json',
-  },
-};
-
 export default {
   default: (
     <div className="container grid grid-cols-12">
@@ -128,13 +118,6 @@ export default {
             },
             calculatorBlock: DEPOSIT_CALCULATOR_BLOCK,
           },
-          {
-            nav: {
-              title: 'Обменивайте баллы на путешествия',
-              icon: { icon: 'PercentageRoundIcon' },
-            },
-            calculatorBlock: BONUS_CALCULATOR_BLOCK,
-          },
           {
             nav: {
               title: 'Рефинансирование',
@@ -194,20 +177,4 @@ export default {
       />
     </div>
   ),
-  bonus: (
-    <div className="container grid grid-cols-12">
-      <Calculator
-        className="col-span-12"
-        calculatorTabs={[
-          {
-            nav: {
-              title: 'Обменивайте баллы на путешествия',
-              icon: { icon: 'PercentageRoundIcon' },
-            },
-            calculatorBlock: BONUS_CALCULATOR_BLOCK,
-          },
-        ]}
-      />
-    </div>
-  ),
 };

package/src/components/Calculator/CalculatorContent.ts

@@ -178,15 +178,6 @@ export type BusinessDepositCalculatorParamsDef = TitleProps &
     calcType: 'BusinessDepositCalculatorForm';
   };
 
-/**
- * @title Калькулятор бонусов
- * @default {"calcType": "BonusCalculatorForm"}
- */
-export type BonusCalculatorParamsDef = TitleProps &
-  CommonCalculatorProps & {
-    calcType: 'BonusCalculatorForm';
-  };
-
 /**
  * @title Калькулятор рефинансирования
  * @default {"calcType": "RefinancingCalculatorForm"}
@@ -211,8 +202,7 @@ export type CalculatorBlockDef =
   | CreditCalculatorParamsDef
   | RefinancingCalculatorParamsDef
   | DepositCalculatorParamsDef
-  | BusinessDepositCalculatorParamsDef
-  | BonusCalculatorParamsDef;
+  | BusinessDepositCalculatorParamsDef;
 
 /**
  * @title Кнопка навигации

package/src/components/Calculator/CreditCalculatorForm.tsx

@@ -3,6 +3,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { clamp } from '../../utils/clamp';
@@ -11,7 +15,6 @@ import {
   type CreditCalculatorProps,
 } from './CalculatorContent';
 import { CalculatorFormLayout } from './CalculatorFormLayout';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { CREDIT_DEFAULT_SUM, DEFAULT_MONTHS } from './constants';
 import {
   getCreditCalculatorParams,
@@ -19,11 +22,8 @@ import {
   type CreditCalculatorParams,
 } from './getCreditCalculatorParams';
 import { getMoneyDefaultValue, getMonthsDefaultValue } from './getDefaultValues';
-import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentType } from './renderPaymentType';
-import { renderRate } from './renderRate';
-import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface CreditCalculatorProp extends CreditCalculatorProps {
   className?: string;

package/src/components/Calculator/DepositCalculatorForm.tsx

@@ -2,6 +2,10 @@ import { JSX } from '@redneckz/uni-jsx';
 import { useEffect } from '@redneckz/uni-jsx/lib/hooks';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import { clamp } from '../../utils/clamp';
 import {
@@ -9,7 +13,6 @@ import {
   type DepositCalculatorProps,
 } from './CalculatorContent';
 import { CalculatorFormLayout } from './CalculatorFormLayout';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
 import { DEPOSIT_DEFAULT_SUM } from './constants';
 import { getMoneyDefaultValue, getMonthsDefaultValue } from './getDefaultValues';
 import {
@@ -17,12 +20,9 @@ import {
   type DepositCalculatorData,
   type DepositCalculatorParams,
 } from './getDepositCalculatorParams';
-import { renderFootnote } from './renderFootnote';
 import { renderInterestPayment } from './renderInterestPayment';
 import { renderMonthsInput } from './renderMonthsInput';
-import { renderRate } from './renderRate';
 import { renderRegistrationType } from './renderRegistrationType';
-import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface DepositCalculatorProp extends DepositCalculatorProps {
   className?: string;

package/src/components/Calculator/EmbeddableCalcBlocks.tsx

@@ -1,4 +1,3 @@
-import { BonusCalculatorForm, type BonusCalculatorProps } from './BonusCalculatorForm';
 import {
   BusinessDepositCalculatorForm,
   type BusinessDepositCalculatorProp,
@@ -14,13 +13,11 @@ export type EmbeddableCalcProps =
   | CreditCalculatorProp
   | DepositCalculatorProp
   | BusinessDepositCalculatorProp
-  | BonusCalculatorProps
   | RefinancingCalculatorProp;
 
 export const EmbeddableCalcBlocks = {
   CreditCalculatorForm,
   DepositCalculatorForm,
   BusinessDepositCalculatorForm,
-  BonusCalculatorForm,
   RefinancingCalculatorForm,
 };

package/src/components/Calculator/RefinancingCalculatorForm.tsx

@@ -2,6 +2,10 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { type JSONRefObject } from '../../data/JSONRefObject';
 import { useForm, type FormFieldRegisterer } from '../../hooks/useForm';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
 import { Checkbox } from '../../ui-kit/Checkbox/Checkbox';
 import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
 import {
@@ -9,7 +13,6 @@ import {
   type RefinancingCalculatorProps,
 } from './CalculatorContent';
 import { CalculatorFormLayout } from './CalculatorFormLayout';
-import { CalculatorValueBlock } from './CalculatorValueBlock';
 import {
   DEFAULT_REFINANCING_MONTHS,
   REFINANCING_DEFAULT_SUM,
@@ -20,11 +23,8 @@ import {
   type RefinancingCalculatorData,
   type RefinancingCalculatorParams,
 } from './getRefinancingCalculatorParams';
-import { renderFootnote } from './renderFootnote';
 import { renderMonthsInput } from './renderMonthsInput';
 import { renderPaymentType } from './renderPaymentType';
-import { renderRate } from './renderRate';
-import { renderWantedSumInput } from './renderWantedSumInput';
 
 export interface RefinancingCalculatorProp extends RefinancingCalculatorProps {
   className?: string;

package/src/components/Calculator/constants.ts

@@ -1,4 +1,3 @@
-import { type BonusCalculatorData } from './getBonusCalculatorParams';
 import { type CreditCalculatorSourceBookRateParams } from './getCreditCalculatorParams';
 import { type DepositCalculatorSourceBookParams } from './getDepositCalculatorParams';
 import { type RefinancingCalculatorSourceBookRateParams } from './getRefinancingCalculatorParams';
@@ -58,22 +57,6 @@ export const DEFAULT_REFINANCING_CALCULATOR_PARAMS: RefinancingCalculatorSourceB
   isInsurance: true,
 };
 
-export const DEFAULT_TRAVEL_MIN_SUM = 6000;
-export const DEFAULT_REST_MIN_SUM = 6000;
-
-export const DEFAULT_BONUS_CALCULATOR_PARAMS: Required<BonusCalculatorData> = {
-  minSumTravel: 6000,
-  maxSumTravel: 200000,
-  minSumOther: 6000,
-  maxSumOther: 200000,
-  maxBonus: 5000,
-  prefMonthsNum: 2,
-  prefTravelBonusRate: 0.015,
-  prefRestBonusRate: 0.01,
-  travelBonusRate: 0.015,
-  restBonusRate: 0.01,
-};
-
 export const DEFAULT_DEPOSIT_CALCULATOR_PARAMS: DepositCalculatorSourceBookParams = {
   minSum: 50000,
   maxSum: 100000001,
@@ -98,7 +81,6 @@ export const DEFAULT_BUSINESS_DEPOSIT_CALCULATOR_PARAMS: BusinessDepositCalculat
   };
 
 export const CREDIT_CALC_DEFAULT_DIR = 'credit-calculator-data';
-export const BONUS_CALC_DEFAULT_DIR = 'bonus-calculator-data';
 export const DEPOSIT_CALC_DEFAULT_DIR = 'deposit-calculator-data';
 export const BUSINESS_DEPOSIT_CALC_DEFAULT_DIR = 'business-calculator-data';
 export const REFINANCING_CALC_DEFAULT_DIR = 'refinancing-calculator-data';

package/src/components/CalculatorBonus/CalculatorBonus.example.json

@@ -0,0 +1 @@
+{}

package/src/components/CalculatorBonus/CalculatorBonus.fixture.tsx

@@ -0,0 +1,34 @@
+import '../../setup-fixture';
+import { type LinkButtonContent } from '../../ui-kit/LinkButton/LinkButtonContent';
+
+import { CalculatorBonus } from './CalculatorBonus';
+
+const buttons: LinkButtonContent[] = [
+  {
+    href: 'https://rshb.ru',
+    text: 'Отправить заявку',
+    target: '_blank',
+    version: 'primary',
+  },
+  {
+    href: 'https://rshb.ru',
+    text: 'Подробные условия',
+    target: '_blank',
+    version: 'secondary',
+  },
+];
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <CalculatorBonus
+        className="col-span-12"
+        title={'Обменивайте баллы на путешествия'}
+        buttons={buttons}
+        calcSource={{
+          $ref: '/wcms-resources/bonus-calculator-data.json',
+        }}
+      />
+    </div>
+  ),
+};

package/src/components/CalculatorBonus/CalculatorBonus.tsx

@@ -0,0 +1,75 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { useForm } from '../../hooks/useForm';
+import { CalculatorLayout } from '../../ui-kit/Calculator/CalculatorLayout';
+import { CalculatorValueBlock } from '../../ui-kit/Calculator/CalculatorValueBlock';
+import { renderFootnote } from '../../ui-kit/Calculator/renderFootnote';
+import { renderRate } from '../../ui-kit/Calculator/renderRate';
+import { renderWantedSumInput } from '../../ui-kit/Calculator/renderWantedSumInput';
+import { renderButtonsSection } from '../../ui-kit/LinkButton/renderButtonsSection';
+import { UniBlock } from '../../UniBlock/UniBlock';
+import { type UniBlockProps } from '../../UniBlock/UniBlockProps';
+import { style } from '../../utils/style';
+import { type CalculatorBonusContent } from './CalculatorBonusContent';
+import { getBonusCalculatorParams, type BonusCalculatorData } from './getBonusCalculatorParams';
+
+const DEFAULT_TRAVEL_MIN_SUM = 6000;
+const DEFAULT_REST_MIN_SUM = 6000;
+
+export interface CalculatorBonusProps extends CalculatorBonusContent, UniBlockProps {
+  className?: string;
+  calcSource?: BonusCalculatorData & JSONRefObject;
+}
+export const CalculatorBonus = UniBlock<CalculatorBonusProps>(
+  ({ className = '', title, calcSource, buttons, footnote, ...rest }) => {
+    const [userInputParams, { field }] = useForm({
+      travelExpenseValue: DEFAULT_TRAVEL_MIN_SUM,
+      restExpenseValue: DEFAULT_REST_MIN_SUM,
+    });
+
+    const { minSumTravel, maxSumTravel, minSumOther, maxSumOther, monthBonus, yearBonus } =
+      getBonusCalculatorParams(userInputParams, calcSource);
+
+    return (
+      <CalculatorLayout className={className} title={title} {...rest}>
+        <section
+          className={style('flex flex-col justify-between @4xl:flex-row gap-y-4xl', className)}
+        >
+          <div className="flex flex-col @xl:max-w-md gap-2xl border-b border-b-main-divider @xl:border-none pb-3xl @xl:pb-0">
+            {renderWantedSumInput({
+              title: 'Сумма покупок в категории путешествия, ₽',
+              min: minSumTravel,
+              max: maxSumTravel,
+              step: 500,
+              isShowItems: false,
+              ...field('travelExpenseValue'),
+            })}
+            {renderWantedSumInput({
+              title: 'Сумма покупок в остальных категориях, ₽',
+              min: minSumOther,
+              max: maxSumOther,
+              step: 500,
+              isShowItems: false,
+              ...field('restExpenseValue'),
+            })}
+          </div>
+          {monthBonus >= 0
+            ? renderRate({
+                title: 'Баллов за месяц',
+                rate: monthBonus,
+                fractionDigits: 0,
+                isUnknownRateShown: false,
+                unit: '',
+              })
+            : null}
+          <div className="flex flex-col gap-y-xl @xl:w-96">
+            {yearBonus >= 0 ? (
+              <CalculatorValueBlock title="Баллов за год" value={yearBonus} />
+            ) : null}
+            {renderButtonsSection(buttons, { isVertical: true })}
+            {renderFootnote(footnote)}
+          </div>
+        </section>
+      </CalculatorLayout>
+    );
+  },
+);

package/src/components/CalculatorBonus/CalculatorBonus.ui.json

@@ -0,0 +1 @@
+{}

package/src/components/CalculatorBonus/CalculatorBonusContent.ts

@@ -0,0 +1,16 @@
+import { type JSONRefObject } from '../../data/JSONRefObject';
+import { type Footnote } from '../../model/Footnote';
+import { type TitleProps } from '../../model/HeadlineType';
+import { type ButtonsSectionContent } from '../../ui-kit/LinkButton/ButtonsSectionContent';
+import { type UniBlockContent } from '../../UniBlock/UniBlockProps';
+
+/**
+ * @title Блок кнопок
+ */
+export type CalculatorBonusContent = UniBlockContent &
+  TitleProps &
+  Footnote &
+  ButtonsSectionContent & {
+    /** @title Данные калькулятора */
+    calcSource?: JSONRefObject;
+  };

package/src/components/{Calculator → CalculatorBonus}/getBonus.ts

@@ -1,6 +1,20 @@
-import { DEFAULT_BONUS_CALCULATOR_PARAMS, MONTHS_IN_YEAR } from './constants';
 import { type BonusCalculatorData } from './getBonusCalculatorParams';
 
+const DEFAULT_BONUS_CALCULATOR_PARAMS: Required<BonusCalculatorData> = {
+  minSumTravel: 6000,
+  maxSumTravel: 200000,
+  minSumOther: 6000,
+  maxSumOther: 200000,
+  maxBonus: 5000,
+  prefMonthsNum: 2,
+  prefTravelBonusRate: 0.015,
+  prefRestBonusRate: 0.01,
+  travelBonusRate: 0.015,
+  restBonusRate: 0.01,
+};
+
+const MONTHS_IN_YEAR = 12;
+
 export const getBonus = (
   params: BonusCalculatorData,
   bonusTravelValue: number,

package/src/components/{Calculator → CalculatorBonus}/getBonusCalculatorParams.ts

@@ -1,4 +1,3 @@
-import { DEFAULT_BONUS_CALCULATOR_PARAMS } from './constants';
 import { getBonus } from './getBonus';
 
 export interface BonusCalculatorUserInputParams {
@@ -6,6 +5,19 @@ export interface BonusCalculatorUserInputParams {
   restExpenseValue: number;
 }
 
+const DEFAULT_BONUS_CALCULATOR_PARAMS: Required<BonusCalculatorData> = {
+  minSumTravel: 6000,
+  maxSumTravel: 200000,
+  minSumOther: 6000,
+  maxSumOther: 200000,
+  maxBonus: 5000,
+  prefMonthsNum: 2,
+  prefTravelBonusRate: 0.015,
+  prefRestBonusRate: 0.01,
+  travelBonusRate: 0.015,
+  restBonusRate: 0.01,
+};
+
 export interface BonusCalculatorData {
   minSumTravel?: number;
   maxSumTravel?: number;

package/src/components/Tabs/Tabs.fixture.mobile.tsx

@@ -36,20 +36,4 @@ export default {
       />
     </div>
   ),
-  centered: (
-    <div className="container grid grid-cols-12">
-      <Tabs
-        className="col-span-12"
-        tabs={[
-          { type: 'group', ref: 'tab1', title: '2021' },
-          { type: 'group', ref: 'tab2', title: '2020' },
-          { type: 'link', href: 'https://google.com', text: '2019' },
-          { type: 'link', href: 'https://yandex.com', text: '2018' },
-          { type: 'link', href: 'https://ya.com', text: '2017' },
-          { type: 'link', href: 'https://habr.com', text: '2016' },
-        ]}
-        tabsMode="centered"
-      />
-    </div>
-  ),
 };

package/src/components/Tabs/Tabs.fixture.tsx

@@ -36,23 +36,4 @@ export default {
       />
     </div>
   ),
-  centered: (
-    <div className="container grid grid-cols-12">
-      <Tabs
-        className="col-span-12"
-        tabs={[
-          { type: 'group', ref: 'tab1', title: '2021' },
-          { type: 'group', ref: 'tab2', title: '2020' },
-          { type: 'link', href: 'https://google.com', text: '2019' },
-          { type: 'link', href: 'https://yandex.com', text: '2018' },
-          { type: 'link', href: 'https://ya.com', text: '2017' },
-          { type: 'link', href: 'https://habr.com', text: '2016' },
-          { type: 'link', href: 'https://kremlin.com', text: '2015' },
-          { type: 'link', href: 'https://gov.com', text: '2014' },
-          { type: 'group', ref: 'tab3', title: '2013' },
-        ]}
-        tabsMode="centered"
-      />
-    </div>
-  ),
 };

package/src/components/Tabs/TabsContent.ts

@@ -37,7 +37,7 @@ export type TabData = GroupTabData | LinkTabData;
  *   "По центру"
  * ]
  */
-export type TabsMode = 'wideScreen' | 'scrollable' | 'centered';
+export type TabsMode = 'wideScreen' | 'scrollable';
 
 /**
  * @title Вкладки

package/src/components/Tabs/renderTabs.tsx

@@ -15,16 +15,6 @@ export const renderTabs = ({ tabsMode, ...props }: RenderTabsProps) => {
   switch (tabsMode) {
     case 'wideScreen':
       return <TabsControl {...props} />;
-    case 'centered':
-      return (
-        <div className="flex">
-          <TabsControl
-            className="m-auto p-xs rounded-md bg-main-gray"
-            tabsType="rounded"
-            {...props}
-          />
-        </div>
-      );
     case 'scrollable':
       return (
         <div className="flex">

package/src/components/TabsLayout/TabsLayout.example.json

@@ -3,8 +3,9 @@
     "version": "primary",
     "padding": "",
     "tabs": [
-      { "title": "Первый таб", "description": "Описание первого таба" },
-      { "title": "Второй таб", "description": "Описание второго таба" }
-    ]
+      { "text": "Первый таб", "description": "", "type": "group" },
+      { "text": "Второй таб", "description": "", "type": "group" }
+    ],
+    "tabsType": "animated"
   }
 }

package/src/components/TabsLayout/TabsLayout.fixture.mobile.tsx

@@ -2,49 +2,70 @@ import { type BlockRendererOptions } from '../../BlockRenderer/BlockRendererOpti
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
 import { TabsLayout } from './TabsLayout';
-import example from './TabsLayout.example.json';
+import { type Tab } from './TabsLayoutContent';
 
 const options: BlockRendererOptions = {
   blocksRegistry: Blocks,
 };
 
+const TABS: Tab[] = [
+  { text: 'Первый таб', description: 'Описание первого таба', type: 'group' },
+  { text: 'Второй таб', description: 'Описание второго таба', type: 'group' },
+];
+
+const TEXT_BLOCK_DESCRIPTION = {
+  type: 'TextBlock',
+  content: {
+    title: 'Текстовый блок',
+    description: 'Описание',
+  },
+  style: ['col-span-12'],
+};
+
 export default {
   default: (
     <div className="container grid grid-cols-12">
       <TabsLayout
         className="col-span-12"
-        tabs={example.content.tabs}
+        tabs={TABS}
+        options={options}
+        tabsType="animated"
+        block={{
+          slots: {
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
+          },
+        }}
+      />
+    </div>
+  ),
+  wide: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
+        options={options}
+        tabsType="default"
+        block={{
+          slots: {
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
+          },
+        }}
+      />
+    </div>
+  ),
+  scrollable: (
+    <div className="container grid grid-cols-12">
+      <TabsLayout
+        className="col-span-12"
+        tabs={TABS}
         options={options}
+        tabsType="underlined"
         block={{
           slots: {
-            'Первый таб': [
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-            ],
-            'Второй таб': [
-              {
-                type: 'TextBlock',
-                content: {
-                  title: 'Текстовый блок',
-                  description: 'Описание',
-                },
-                style: ['col-span-12'],
-              },
-            ],
+            'Первый таб': [TEXT_BLOCK_DESCRIPTION, TEXT_BLOCK_DESCRIPTION],
+            'Второй таб': [TEXT_BLOCK_DESCRIPTION],
           },
         }}
       />