@redneckz/wildless-cms-uni-blocks 0.3.10 → 0.3.13

package/src/components/Accordion/Accordion.fixture.tsx

@@ -1,23 +1,25 @@
 import { context } from '../../setup-fixture';
+import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';
+import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
 import { PICTURE_TEXT } from '../PictureText/PictureText.fixture';
+import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
+import { PRODUCT_TILE, PRODUCT_PENSION_TILE } from '../ProductTile/ProductTile.fixture';
 import { TEXT_BLOCK } from '../TextBlock/TextBlock.fixture';
-import { TILE } from '../Tile/Tile.fixture';
-import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
-import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
-import { defaultProps as MINI_GALLERY } from '../MiniGallery/MiniGallery.fixture';
+import { TILE, TILE_PREMIUM } from '../Tile/Tile.fixture';
 import type { AccordionProps } from './Accordion';
 import { Accordion } from './Accordion';
 import type {
+  GalleryAccordionBlockDef,
   HeadlineAccordionBlockDef,
   LinkDocsAccordionBlockDef,
+  MiniGalleryAccordionBlockDef,
   PictureTextAccordionBlockDef,
+  ProductBlockAccordionBlockDef,
+  ProductTileAccordionBlockDef,
   TextBlockAccordionBlockDef,
   TileAccordionBlockDef,
-  ProductTileAccordionBlockDef,
-  GalleryAccordionBlockDef,
-  MiniGalleryAccordionBlockDef,
 } from './AccordionContent';
 
 const TEXT_BLOCK_ACCORDION_BLOCK: TextBlockAccordionBlockDef = {
@@ -35,6 +37,11 @@ const PICTURE_TEXT_ACCORDION_BLOCK: PictureTextAccordionBlockDef = {
   ...PICTURE_TEXT,
 };
 
+const PRODUCT_BLOCK_ACCORDION_BLOCK: ProductBlockAccordionBlockDef = {
+  accordionBlockType: 'ProductBlock',
+  ...PRODUCT_BLOCK,
+};
+
 const LINK_DOCS_ACCORDION_BLOCK: LinkDocsAccordionBlockDef = {
   accordionBlockType: 'LinkDocs',
   ...linkDocsContentExample,
@@ -46,11 +53,21 @@ const TILES_ACCORDION_BLOCK: TileAccordionBlockDef = {
   ...TILE,
 };
 
+const TILES_PREMIUM_ACCORDION_BLOCK: TileAccordionBlockDef = {
+  accordionBlockType: 'Tile',
+  ...TILE_PREMIUM,
+};
+
 const PRODUCT_TILES_ACCORDION_BLOCK: ProductTileAccordionBlockDef = {
   accordionBlockType: 'ProductTile',
   ...PRODUCT_TILE,
 };
 
+const PRODUCT_PENSION_TILES__ACCORDION_BLOCK: ProductTileAccordionBlockDef = {
+  accordionBlockType: 'ProductTile',
+  ...PRODUCT_PENSION_TILE,
+};
+
 const GALLERY_ACCORDION_BLOCK: GalleryAccordionBlockDef = {
   accordionBlockType: 'Gallery',
   ...GALLERY,
@@ -61,8 +78,7 @@ const MINI_GALLERY_ACCORDION_BLOCK: MiniGalleryAccordionBlockDef = {
   ...MINI_GALLERY,
 };
 
-const propsTextBlock: AccordionProps = {
-  title: 'Accordion title',
+const propsBlock: AccordionProps = {
   context,
   accordionItems: [
     {
@@ -100,8 +116,58 @@ const propsTextBlock: AccordionProps = {
   ],
 };
 
-export default (
-  <div className="container grid grid-cols-12">
-    <Accordion className="col-span-12" {...propsTextBlock} />
-  </div>
-);
+const propsTwoColumns: AccordionProps = {
+  context,
+  accordionItems: [
+    {
+      label: 'Другие продукты Россельхозбанка 1',
+      blocks: [
+        TILES_PREMIUM_ACCORDION_BLOCK,
+        TILES_PREMIUM_ACCORDION_BLOCK,
+        TILES_ACCORDION_BLOCK,
+        TILES_ACCORDION_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие продукты Россельхозбанка 2',
+      blocks: [
+        PRODUCT_TILES_ACCORDION_BLOCK,
+        PRODUCT_TILES_ACCORDION_BLOCK,
+        PRODUCT_PENSION_TILES__ACCORDION_BLOCK,
+        PRODUCT_PENSION_TILES__ACCORDION_BLOCK,
+      ],
+      columns: 2,
+    },
+    {
+      label: 'Другие продукты Россельхозбанка 3',
+      blocks: [PRODUCT_BLOCK_ACCORDION_BLOCK, PRODUCT_BLOCK_ACCORDION_BLOCK],
+      columns: 2,
+    },
+
+    {
+      label: 'Другие продукты Россельхозбанка 4',
+      blocks: [
+        TEXT_BLOCK_ACCORDION_BLOCK,
+        TEXT_BLOCK_ACCORDION_BLOCK,
+        TEXT_BLOCK_ACCORDION_BLOCK,
+        TEXT_BLOCK_ACCORDION_BLOCK,
+      ],
+      columns: 2,
+    },
+  ],
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Accordion className="col-span-12" {...propsBlock} />
+    </div>
+  ),
+
+  'two columns': (
+    <div className="container grid grid-cols-12">
+      <Accordion className="col-span-12" {...propsTwoColumns} />
+    </div>
+  ),
+};

package/src/components/Accordion/AccordionBlocks.tsx

@@ -1,6 +1,7 @@
 import { Headline } from '../Headline/Headline';
 import { LinkDocs } from '../LinkDocs/LinkDocs';
 import { PictureText } from '../PictureText/PictureText';
+import { ProductBlock } from '../ProductBlock/ProductBlock';
 import { TextBlock } from '../TextBlock/TextBlock';
 import { Tile } from '../Tile/Tile';
 import { ProductTile } from '../ProductTile/ProductTile';
@@ -13,6 +14,7 @@ export const AccordionBlocks = {
   LinkDocs,
   TextBlock,
   PictureText,
+  ProductBlock,
   Tile,
   ProductTile,
   Gallery,

package/src/components/Accordion/AccordionContent.ts

@@ -3,6 +3,7 @@ import type { HeadlineContent } from '../Headline/HeadlineContent';
 import type { LinkDocsContent } from '../LinkDocs/LinkDocsContent';
 import type { MiniGalleryContent } from '../MiniGallery/MiniGalleryContent';
 import type { PictureTextContent } from '../PictureText/PictureTextContent';
+import type { ProductBlockContent } from '../ProductBlock/ProductBlockContent';
 import type { ProductTileContent } from '../ProductTile/ProductTileContent';
 import type { TextBlockContent } from '../TextBlock/TextBlockContent';
 import type { TileContent } from '../Tile/TileContent';
@@ -18,6 +19,7 @@ export type AccordionBlockType =
   | 'PictureText'
   | 'Tile'
   | 'ProductTile'
+  | 'ProductBlock'
   | 'Gallery'
   | 'MiniGallery'
   | 'LinkList';
@@ -46,6 +48,11 @@ export type TextBlockAccordionBlockDef = TextBlockContent & AccordionBlockDef;
  */
 export type PictureTextAccordionBlockDef = PictureTextContent & AccordionBlockDef;
 
+/**
+ * @title Продуктовый блок
+ */
+export type ProductBlockAccordionBlockDef = ProductBlockContent & AccordionBlockDef;
+
 /**
  * @title Плитка
  */
@@ -85,12 +92,19 @@ export type AccordionBlockProps =
   | LinkDocsAccordionBlockDef
   | TextBlockAccordionBlockDef
   | PictureTextAccordionBlockDef
+  | ProductBlockAccordionBlockDef
   | TileAccordionBlockDef
   | ProductTileAccordionBlockDef
   | GalleryAccordionBlockDef
   | MiniGalleryAccordionBlockDef
   | LinkListAccordionBlockDef;
 
+/**
+ * @title Количество колонок
+ * @enumNames ["1 колонка", "2 колонки"]
+ */
+export type ColumnsCount = 1 | 2;
+
 /**
  * @title Элемент списка
  */
@@ -107,6 +121,8 @@ export interface AccordionItemCommonProps {
    * @default false
    */
   bordered?: boolean; // TODO: только для мобильной версии
+
+  columns?: ColumnsCount;
 }
 
 /**

package/src/components/Accordion/AccordionItem.mobile.tsx

@@ -26,13 +26,13 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, bordered,
         onClick={handleToggle}
       >
         <span
-          className={`text-sm pr-2.5 font-medium ${
+          className={`text-m-title-xs pr-2.5 font-medium ${
             hasContent ? 'group-hover:text-primary-main' : ''
           }`}
         >
           {label}
         </span>
-        {hasContent ? <Icon name={icon} width="20" height="20" asSVG /> : null}
+        {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
       </button>
       {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
     </li>

package/src/components/Accordion/AccordionItem.tsx

@@ -7,7 +7,7 @@ import { isActiveHandler } from './utils/isActiveHandler';
 
 export interface AccordionItemProps extends AccordionItemCommonProps, UniBlockProps {}
 
-export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }) => {
+export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, columns, context }) => {
   const { hasContent, icon, handleToggle } = isActiveHandler({
     context,
     blocks,
@@ -29,7 +29,9 @@ export const AccordionItem = JSX<AccordionItemProps>(({ label, blocks, context }
         </span>
         {hasContent ? <Icon name={icon} width="24" height="24" asSVG /> : null}
       </button>
-      {hasContent ? <AccordionItemInner blocks={blocks} context={context} /> : null}
+      {hasContent ? (
+        <AccordionItemInner columns={columns} blocks={blocks} context={context} />
+      ) : null}
     </li>
   );
 });

package/src/components/Accordion/AccordionItemInner.mobile.tsx

@@ -21,7 +21,7 @@ const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps
 
   const AccordionBlock: JSXBlock = AccordionBlocks[type];
   return (
-    <div className="mb-5 last:mb-0" key={`block_${i}`}>
+    <div className="mb-5 last:mb-0 first:mt-2" key={`block_${i}`}>
       <AccordionBlock context={context} {...block} className="!p-0" />
     </div>
   );

package/src/components/Accordion/AccordionItemInner.tsx

@@ -5,24 +5,29 @@ import { AccordionBlocks } from './AccordionBlocks';
 import type { AccordionBlockProps } from './AccordionContent';
 import type { AccordionItemProps } from './AccordionItem';
 
-export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, context }) => {
+export const AccordionItemInner = JSX<AccordionItemProps>(({ blocks, columns = 1, context }) => {
   return (
-    <div className={'transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0'}>
-      {blocks?.length ? blocks.map(renderBlock(context)) : null}
+    <div
+      className={
+        'transition-all duration-300 max-h-0 overflow-hidden group-last:last:pb-0 flex flex-wrap'
+      }
+    >
+      {blocks?.length ? blocks.map(renderBlock(context, columns)) : null}
     </div>
   );
 });
 
-const renderBlock = (context: ContentPageContext) => (block: AccordionBlockProps, i: number) => {
-  const type = block?.accordionBlockType;
-  if (!type || !(type in AccordionBlocks)) {
-    return null;
-  }
-
-  const AccordionBlock: JSXBlock = AccordionBlocks[type];
-  return (
-    <div className="mb-5 last:mb-0 pb-5" key={`block_${i}`}>
-      <AccordionBlock context={context} {...block} className="!p-0" />
-    </div>
-  );
-};
+const renderBlock =
+  (context: ContentPageContext, columns: number) => (block: AccordionBlockProps, i: number) => {
+    const type = block?.accordionBlockType;
+    if (!type || !(type in AccordionBlocks)) {
+      return null;
+    }
+    const columnsCountClass = columns === 2 ? 'w-1/2' : '';
+    const AccordionBlock: JSXBlock = AccordionBlocks[type];
+    return (
+      <div className={`mb-5 last:mb-0 pb-5 ${columnsCountClass}`} key={`block_${i}`}>
+        <AccordionBlock context={context} {...block} className="!p-0" />
+      </div>
+    );
+  };

package/src/components/BaseTile/BaseTile.tsx

@@ -12,7 +12,7 @@ export const BaseTile = JSX<BaseTileProps>(
         <div className="flex grow w-full justify-between">
           <div className="flex flex-col justify-between w-full">
             <div>{children}</div>
-            <div>{buttons}</div>
+            {buttons?.length ? <div>{buttons}</div> : null}
           </div>
           {image}
         </div>

package/src/components/BenefitsBlock/BenefitsBlock.fixture.tsx

@@ -2,36 +2,39 @@ import { context } from '../../setup-fixture';
 
 import { BenefitsBlock } from './BenefitsBlock';
 
-export default (
-  <div className="container grid grid-cols-12">
-    <BenefitsBlock
-      context={context}
-      className="col-span-12"
-      title="Преимущества кредита"
-      benefits={[
-        {
-          label: 'Без комиссии',
-          description:
-            'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
-          icon: 'ClockIcon',
-        },
-        {
-          label: 'Оформление по паспорту',
-          description: 'Обеспечение не требуется. Кредит можно получить на любые цели',
-          icon: 'SignDocsIcon',
-        },
-        {
-          label: 'Без залога и поручительства',
-          description:
-            'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
-          icon: 'ComfortableCompIcon',
-        },
-        {
-          label: 'Деньги за 3 дня',
-          description: 'Рассмотрение заявки с момента предоставления полного комплекта документов',
-          icon: 'ActualBalanceIcon',
-        },
-      ]}
-    />
-  </div>
-);
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <BenefitsBlock
+        context={context}
+        className="col-span-12"
+        title="Преимущества кредита"
+        benefits={[
+          {
+            label: 'Без комиссии',
+            description:
+              'Комиссия за выдачу кредита не взимается. Допускается полное или частичное погашение кредита',
+            icon: 'ClockIcon',
+          },
+          {
+            label: 'Оформление по паспорту',
+            description: 'Обеспечение не требуется. Кредит можно получить на любые цели',
+            icon: 'SignDocsIcon',
+          },
+          {
+            label: 'Без залога и поручительства',
+            description:
+              'Единовременное перечисление суммы кредита в полном объёме на текущий счет в Банке',
+            icon: 'ComfortableCompIcon',
+          },
+          {
+            label: 'Деньги за 3 дня',
+            description:
+              'Рассмотрение заявки с момента предоставления полного комплекта документов',
+            icon: 'ActualBalanceIcon',
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/Blocks.mobile.ts

@@ -1,29 +1,33 @@
 import { Accordion } from './Accordion/Accordion';
+import { ComparisonTable } from './ComparisonTable/ComparisonTable';
 import { ExchangeRateTile } from './ExchangeRateTile/ExchangeRateTile';
 import { Footer } from './Footer/Footer';
 import { Gallery } from './Gallery/Gallery';
 import { Header } from './Header/Header';
 import { Headline } from './Headline/Headline';
 import { LinkDocs } from './LinkDocs/LinkDocs';
+import { LinkList } from './LinkList/LinkList';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { StepsBlock } from './StepsBlock/StepsBlock';
+import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
-import { LinkList } from './LinkList/LinkList';
 
 export const Blocks = {
   Accordion,
+  ComparisonTable,
   ExchangeRateTile,
   Footer,
   Gallery,
   Header,
   Headline,
   LinkDocs,
+  LinkList,
   MobileAppTile,
   ProductBlock,
   ProductGallery,
   StepsBlock,
+  TariffsTable,
   TextBlock,
-  LinkList,
 };

package/src/components/Blocks.ts

@@ -12,6 +12,7 @@ import { MiniGallery } from './MiniGallery/MiniGallery';
 import { MobileAppTile } from './MobileAppTile/MobileAppTile';
 import { Navigation } from './Navigation/Navigation';
 import { PictureText } from './PictureText/PictureText';
+import { Placeholder } from './Placeholder/Placeholder';
 import { ProductBlock } from './ProductBlock/ProductBlock';
 import { ProductGallery } from './ProductGallery/ProductGallery';
 import { ProductTile } from './ProductTile/ProductTile';
@@ -44,4 +45,5 @@ export const Blocks = {
   TextBlock,
   Tile,
   Navigation,
+  Placeholder,
 };

package/src/components/ComparisonTable/ComparisonTable.tsx

@@ -1,15 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
-import { useComparisonTableScroll } from '../../hooks/useComparisonTableScroll';
-import { useLink } from '../../hooks/useLink';
-import type { UniBlockProps } from '../../types';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Heading } from '../../ui-kit/Heading/Heading';
+import { FIRST_CELL_CLASSES } from './constants';
+import { ComparisonTableBody } from './ComparisonTableBody';
+import type { UniBlockProps } from '../../types';
 import type { ComparisonTableContent } from './ComparisonTableContent';
-import { COLS_LENGTH_FOR_SCROLL, COLUMN_WIDTH, FIRST_CELL_CLASSES } from './constants';
-import { HeaderCell } from './HeaderCell';
-import { TableCarouselContainer } from './TableCarouselContainer';
-import { TableRow } from './TableRow';
-import { TableRowContainer } from './TableRowContainer';
 
 export interface ComparisonTableProps extends ComparisonTableContent, UniBlockProps {}
 
@@ -23,29 +17,7 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
     visibleRowLength = 0,
     isColoredFirstColumn = false,
   }) => {
-    const router = context.useRouter();
-    const { handlerDecorator } = context;
-
-    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
     const [isShowAllRow, setIsShowAllRow] = context.useState(!visibleRowLength);
-
-    const colHeaders = columns?.map(({ header }) => header || {});
-    const colData = columns?.map(({ data }) => data) || [];
-    const rowData = rowHeaders
-      ?.map((header, i) => ({
-        header,
-        data: colData.map((col) => col?.[i] || [{}]),
-      }))
-      .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
-
-    const { nextClick, prevClick, isScrollAvailable, showNextButton, showPrevButton } =
-      useComparisonTableScroll({
-        colData,
-        colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
-        activeCardIndex,
-        setActiveCardIndex,
-      });
-
     const showToggle = () => setIsShowAllRow(!isShowAllRow);
 
     return (
@@ -59,75 +31,42 @@ export const ComparisonTable = JSX<ComparisonTableProps>(
           className="max-w-[47rem] text-center mb-9 mx-auto"
           title={title}
         />
-        <div role="table">
-          {colHeaders?.length ? (
-            <TableRowContainer>
-              <div className={FIRST_CELL_CLASSES} role="columnheader" scope="col" />
-              <TableCarouselContainer activeCardIndex={activeCardIndex} columnWidth={COLUMN_WIDTH}>
-                {colHeaders.map((header, i) => (
-                  <HeaderCell
-                    key={String(i)}
-                    {...header}
-                    link={header.link && useLink({ router, handlerDecorator }, header.link)}
-                  />
-                ))}
-              </TableCarouselContainer>
-            </TableRowContainer>
-          ) : null}
-
-          {rowData?.length ? (
-            <div className="relative">
-              {rowData.map((row, i, { length }) => (
-                <TableRow
-                  key={String(i)}
-                  row={row}
-                  isFirstRow={i === 0}
-                  isLastRow={i + 1 === length}
-                  activeCardIndex={activeCardIndex}
-                  isColoredFirstColumn={isColoredFirstColumn}
-                />
-              ))}
-              {isScrollAvailable ? (
-                <div>
-                  <div className="absolute top-7 right-7 z-10">
-                    <ArrowButton
-                      onClick={nextClick}
-                      disabled={!showNextButton}
-                      ariaLabel="Пролистать вправо"
-                    />
-                    <ArrowButton
-                      className="mt-4 rotate-180"
-                      onClick={prevClick}
-                      disabled={!showPrevButton}
-                      ariaLabel="Пролистать влево"
-                    />
-                  </div>
-                </div>
-              ) : null}
-            </div>
-          ) : null}
-        </div>
-
-        {isScrollAvailable ? (
-          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
-        ) : null}
-
-        {visibleRowLength ? (
-          <div className="pr-[50px]">
-            <div className="flex w-full">
-              <div className={FIRST_CELL_CLASSES} />
-              <button
-                onClick={showToggle}
-                className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
-              >
-                <div className="font-sans font-medium text-xs py-[11px]">
-                  {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
-                </div>
-              </button>
-            </div>
-          </div>
-        ) : null}
+        <ComparisonTableBody
+          context={context}
+          columns={columns}
+          rowHeaders={rowHeaders}
+          isShowAllRow={isShowAllRow}
+          isColoredFirstColumn={isColoredFirstColumn}
+          visibleRowLength={visibleRowLength}
+        />
+        {visibleRowLength
+          ? renderShowMoreToggleButton({ isShowAllRow, onClick: showToggle })
+          : null}
       </section>
     );
   },
 );
+
+const renderShowMoreToggleButton = ({
+  isShowAllRow,
+  onClick,
+}: {
+  isShowAllRow: boolean;
+  onClick?: (ev?: MouseEvent) => void;
+}) => {
+  return (
+    <div className="pr-[50px]">
+      <div className="flex w-full">
+        <div className={FIRST_CELL_CLASSES} />
+        <button
+          onClick={onClick}
+          className="mt-5 flex-1 border-main-stroke border-solid border text-primary-text bg-white hover:border-primary-main hover:text-primary-main"
+        >
+          <div className="font-sans font-medium text-xs py-[11px]">
+            {!isShowAllRow ? 'Показать все параметры' : 'Скрыть'}
+          </div>
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/ComparisonTable/ComparisonTableBody.tsx

@@ -0,0 +1,68 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { ComparisonTableColumnHeaders } from './ComparisonTableColumnHeaders';
+import { ComparisonTableRows } from './ComparisonTableRows';
+import { useTableArrowScrollControl } from '../../hooks/useTableArrowScrollControl';
+import { COLS_LENGTH_FOR_SCROLL } from './constants';
+import { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { Column, RowHeader } from './ComparisonTableContent';
+
+interface ComparisonTableBodyProps {
+  context: ContentPageContext;
+  columns?: Column[];
+  rowHeaders?: RowHeader[];
+  isShowAllRow: boolean;
+  isColoredFirstColumn: boolean;
+  visibleRowLength: number;
+}
+
+export const ComparisonTableBody = JSX<ComparisonTableBodyProps>(
+  ({ context, columns, rowHeaders, isShowAllRow, visibleRowLength, isColoredFirstColumn }) => {
+    const router = context.useRouter();
+    const { handlerDecorator } = context;
+
+    const colHeaders = columns?.map(({ header }) => header || {});
+    const colData = columns?.map(({ data }) => data) || [];
+    const rowData = rowHeaders
+      ?.map((header, i) => ({
+        header,
+        data: colData.map((col) => col?.[i] || [{}]),
+      }))
+      .slice(0, isShowAllRow ? rowHeaders.length : visibleRowLength);
+
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    const tableArrowScrollProps = useTableArrowScrollControl({
+      columnsLength: colData.length,
+      colsLengthForScroll: COLS_LENGTH_FOR_SCROLL,
+      activeCardIndex,
+      setActiveCardIndex,
+    });
+    const { isScrollAvailable } = tableArrowScrollProps;
+
+    return (
+      <div>
+        <div role="table">
+          {colHeaders?.length ? (
+            <ComparisonTableColumnHeaders
+              colHeaders={colHeaders}
+              activeCardIndex={activeCardIndex}
+              router={router}
+              handlerDecorator={handlerDecorator}
+            />
+          ) : null}
+          {rowData?.length ? (
+            <ComparisonTableRows
+              rowData={rowData}
+              activeCardIndex={activeCardIndex}
+              isColoredFirstColumn={isColoredFirstColumn}
+              {...tableArrowScrollProps}
+            />
+          ) : null}
+        </div>
+        {isScrollAvailable ? (
+          <div className="absolute top-0 right-0 bottom-0 w-[84px] bg-opacity-to-white" />
+        ) : null}
+      </div>
+    );
+  },
+);