@redneckz/wildless-cms-uni-blocks 0.8.2 → 0.8.3

package/mobile/src/components/Carousel/Carousel.tsx

@@ -1,15 +1,14 @@
 import { JSX } from '@redneckz/uni-jsx';
+import { useCallback, useState } from '@redneckz/uni-jsx/lib/hooks';
 import { renderChildren } from '../../BlockRenderer/renderChildren';
+import { BlockDef } from '../../model/ContentPageDef';
 import type { JSXBlock, UniBlockProps } from '../../model/JSXBlock';
 import { BlockWrapper } from '../../ui-kit/BlockWrapper';
-import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
 import { SwipeListContainer } from '../../ui-kit/SwipeListControl/SwipeListContainer';
-import {
-  SwipeListScroll,
-  useSwipeListScroll,
-} from '../../ui-kit/SwipeListControl/useSwipeListScroll';
-import type { CarouselContent } from './CarouselContent';
+import { useSwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
 import { style } from '../../utils/style';
+import type { CarouselContent } from './CarouselContent';
+import { CarouselScrollButtons } from './CarouselScrollButtons';
 
 export interface CarouselProps extends CarouselContent, UniBlockProps {
   itemCount?: number;
@@ -17,9 +16,6 @@ export interface CarouselProps extends CarouselContent, UniBlockProps {
 
 const ITEMS_GAP = 4;
 
-const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
-const scrollButtonStyle = 'absolute top-[calc(50%-12px)] z-50';
-
 export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
   ({
     className = '',
@@ -27,17 +23,25 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
     visibleItemCount,
     isBlur = true,
     isCyclic = false,
+    arrowsPadded = true,
     isPadding = true,
     ...rest
   }) => {
     const { blocks: childBlocks } = rest.block || {};
     const count = itemCount || childBlocks?.length || 0;
 
+    const [activeIndex, setActiveIndex] = useState<number>(Math.floor((visibleItemCount || 0) / 2));
+
+    const increaseActiveIndex = useCallback(() => setActiveIndex((_) => _ + 1), []);
+    const decreaseActiveIndex = useCallback(() => setActiveIndex((_) => _ - 1), []);
+
     const [containerRef, scroll] = useSwipeListScroll<HTMLDivElement>({
       itemCount: count,
       isCyclic,
     });
 
+    const isBankHistoryCarousel = childBlocks && childBlocks[0].type === 'CarouselBankHistoryCard';
+
     return (
       <BlockWrapper className={style(getPaddingStyle(isPadding), className)} {...rest}>
         <div className="relative max-w-full">
@@ -48,15 +52,21 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
             gap={ITEMS_GAP}
             onVisibleIndicesChange={scroll.handleVisibleIndicesChange}
           >
-            {renderChildren(rest)}
+            {renderChildren({
+              ...rest,
+              block: { ...rest.block, blocks: buildBlocks(childBlocks, activeIndex) },
+            })}
           </SwipeListContainer>
-          {(scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
-            <div>
-              <div className={`${blurBaseStyle} left-0 bg-opacity-from-white`} />
-              <div className={`${blurBaseStyle} right-0 bg-opacity-to-white`} />
-            </div>
-          ) : null}
-          {renderScrollButtons(scroll)}
+          <CarouselScrollButtons
+            scroll={scroll}
+            isBlur={isBlur}
+            arrowsPadded={arrowsPadded}
+            onScrollLeft={decreaseActiveIndex}
+            onScrollRight={increaseActiveIndex}
+            hasEdgeBlocks={isBankHistoryCarousel}
+            activeIndex={activeIndex}
+            itemCount={count}
+          />
         </div>
       </BlockWrapper>
     );
@@ -65,6 +75,7 @@ export const Carousel: JSXBlock<CarouselProps> = JSX<CarouselProps>(
 
 Carousel.childrenTypes = [
   'CarouselCard',
+  'CarouselBankHistoryCard',
   'CarouselCatalogCard',
   'CarouselInvestmentCard',
   'CarouselProductCard',
@@ -74,20 +85,20 @@ Carousel.childrenTypes = [
   'CarouselInvestmentCard',
 ];
 
-const renderScrollButtons = ({
-  scrollLeft,
-  scrollRight,
-  canScrollLeft,
-  canScrollRight,
-}: SwipeListScroll) => (
-  <div>
-    {canScrollLeft ? (
-      <ScrollLeftButton className={`${scrollButtonStyle} left-8`} onClick={scrollLeft} />
-    ) : null}
-    {canScrollRight ? (
-      <ScrollRightButton className={`${scrollButtonStyle} right-8`} onClick={scrollRight} />
-    ) : null}
-  </div>
-);
+const buildBlocks = (blocks?: BlockDef[], activeIndex?: number) => {
+  return blocks && blocks[0].type === 'CarouselBankHistoryCard'
+    ? blocks.map((_, i) => {
+        return {
+          ..._,
+          content: {
+            ..._.content,
+            orderNumber: i,
+            isActive: activeIndex === i,
+            blocksLength: blocks.length,
+          },
+        };
+      })
+    : blocks;
+};
 
 const getPaddingStyle = (isPadding: boolean): string => (isPadding ? 'p-12' : '');

package/mobile/src/components/Carousel/CarouselContent.ts

@@ -7,8 +7,13 @@ export interface CarouselContent {
    * @enumNames ["auto", "1", "2", "3"]
    */
   visibleItemCount?: 0 | 1 | 2 | 3 | 4;
-  /** @title Добавление  блюра */
+  /** @title Добавление  блюра на стрелках*/
   isBlur?: boolean;
+  /**
+   * @title Добавление  отступа на стрелках
+   * @default true
+   * */
+  arrowsPadded?: boolean;
   /** @title Цикличность */
   isCyclic?: boolean;
   /** @title Внутренний отступ  */

package/mobile/src/components/Carousel/CarouselScrollButtons.tsx

@@ -0,0 +1,81 @@
+import { JSX } from '@redneckz/uni-jsx';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
+import { ScrollLeftButton, ScrollRightButton } from '../../ui-kit/Button/ArrowButton';
+import { SwipeListScroll } from '../../ui-kit/SwipeListControl/useSwipeListScroll';
+import { style } from '../../utils/style';
+
+interface CarouselScrollButtonsProps {
+  scroll: SwipeListScroll;
+  arrowsPadded: boolean;
+  isBlur: boolean;
+  onScrollLeft: () => void;
+  onScrollRight: () => void;
+  hasEdgeBlocks?: boolean;
+  activeIndex: number;
+  itemCount: number;
+}
+
+const scrollButtonStyle = 'absolute top-[calc(50%-24px)] z-50';
+const blurBaseStyle = 'absolute top-0 bottom-0 z-50 w-[84px] pointer-events-none';
+
+export const CarouselScrollButtons = JSX<CarouselScrollButtonsProps>(
+  ({
+    scroll,
+    arrowsPadded,
+    isBlur,
+    onScrollLeft,
+    onScrollRight,
+    hasEdgeBlocks,
+    activeIndex,
+    itemCount,
+  }) => {
+    const { canScrollLeft, canScrollRight, scrollLeft, scrollRight } = scroll;
+
+    const canMoveLeft = hasEdgeBlocks ? activeIndex > 0 : canScrollLeft;
+    const canMoveRight = hasEdgeBlocks ? activeIndex < itemCount - 1 : canScrollRight;
+
+    const handleScrollLeft = useCallback(() => {
+      if (!hasEdgeBlocks) {
+        scrollLeft();
+      } else {
+        canScrollLeft && activeIndex !== itemCount - 1 && scrollLeft();
+        onScrollLeft();
+      }
+    }, [scrollLeft, onScrollLeft, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+
+    const handleScrollRight = useCallback(() => {
+      if (!hasEdgeBlocks) {
+        scrollRight();
+      } else {
+        canScrollRight && activeIndex !== 0 && scrollRight();
+        onScrollRight();
+      }
+    }, [scrollRight, onScrollRight, hasEdgeBlocks, canScrollLeft, activeIndex, itemCount]);
+
+    return (
+      <div>
+        {renderBlur(isBlur, scroll)}
+        {canMoveLeft ? (
+          <ScrollLeftButton
+            className={style(scrollButtonStyle, arrowsPadded ? 'left-8' : 'left-0')}
+            onClick={handleScrollLeft}
+          />
+        ) : null}
+        {canMoveRight ? (
+          <ScrollRightButton
+            className={style(scrollButtonStyle, arrowsPadded ? 'right-8' : 'right-0')}
+            onClick={handleScrollRight}
+          />
+        ) : null}
+      </div>
+    );
+  },
+);
+
+const renderBlur = (isBlur: boolean, scroll: SwipeListScroll) =>
+  (scroll.canScrollLeft || scroll.canScrollRight) && isBlur ? (
+    <div>
+      <div className={style(blurBaseStyle, 'left-0 bg-opacity-from-white')} />
+      <div className={style(blurBaseStyle, 'right-0 bg-opacity-to-white')} />
+    </div>
+  ) : null;

package/mobile/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.example.json

@@ -0,0 +1,4 @@
+{
+  "title": "Заголовок 1",
+  "description": "Описание 1"
+}

package/mobile/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.tsx

@@ -0,0 +1,85 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../model/JSXBlock';
+import { BlockWrapper } from '../../ui-kit/BlockWrapper';
+import { style } from '../../utils/style';
+import { Headline } from '../Headline/Headline';
+import type { CarouselBankHistoryCardContent } from './CarouselBankHistoryCardContent';
+
+interface CarouselBankHistoryCardProps extends CarouselBankHistoryCardContent, UniBlockProps {
+  isActive?: boolean;
+  orderNumber?: number;
+  blocksLength?: number;
+}
+
+export const CarouselBankHistoryCard = JSX<CarouselBankHistoryCardProps>(
+  ({ title, description, isActive, orderNumber = 0, blocksLength = 0 }) => {
+    return (
+      <BlockWrapper className="flex h-[485px]">
+        {isActive ? (
+          <div className="relative flex items-center w-full">
+            <Headline
+              headlineVersion="S"
+              title={title}
+              description={description}
+              align="text-left"
+              className={style(
+                'absolute z-10 h-[385px] w-[440px] text-white shadow-dark-blue',
+                getActiveBlockPosition(orderNumber, blocksLength),
+                getBackgroundColor(orderNumber),
+              )}
+            />
+          </div>
+        ) : (
+          <div className="flex w-full items-center justify-center">
+            <div
+              className={style(
+                'flex justify-center items-center h-[300px] w-[340px] font-mohave text-title-large tracking-[-0.03em]',
+                getBackgroundColor(orderNumber),
+              )}
+            >
+              <span className={getTextColor(orderNumber)}>{title}</span>
+            </div>
+          </div>
+        )}
+      </BlockWrapper>
+    );
+  },
+);
+
+const getBackgroundColor = (orderNumber: number) => {
+  const division = orderNumber % 3;
+  switch (division) {
+    case 0:
+      return 'bg-primary-main';
+    case 1:
+      return 'bg-green-light';
+    case 2:
+      return 'bg-yellow-light';
+
+    default:
+      return 'bg-primary-main';
+  }
+};
+
+const getTextColor = (orderNumber: number) => {
+  const division = orderNumber % 3;
+  switch (division) {
+    case 1:
+      return 'gradient-color-text-on-yellow';
+    case 2:
+      return 'gradient-color-text-on-yellow';
+
+    default:
+      return 'gradient-color-text-on-green';
+  }
+};
+
+const getActiveBlockPosition = (orderNumber: number, blocksLength: number) => {
+  if (orderNumber === 0) {
+    return 'left-9';
+  } else if (orderNumber === blocksLength - 1) {
+    return 'right-9';
+  } else {
+    return '-left-[25px]';
+  }
+};

package/mobile/src/components/CarouselBankHistoryCard/CarouselBankHistoryCard.ui.json

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

package/mobile/src/components/CarouselBankHistoryCard/CarouselBankHistoryCardContent.ts

@@ -0,0 +1,9 @@
+/**
+ * @title Карточка карусели истории банка
+ */
+export interface CarouselBankHistoryCardContent {
+  /** @title Заголовок */
+  title?: string;
+  /** @title Описание */
+  description?: string;
+}

package/mobile/src/components/CarouselCard/CarouselCard.tsx

@@ -17,13 +17,13 @@ const CARD_WIDTH_MAP: Record<CarouselCardVersion, string> = {
 export const CarouselCard = JSX<CarouselCardProps>(
   ({ className = '', button, description, title, carouselVersion = 'normal' }) => (
     <section
-      className={`flex pb-9 pl-12 border-box ${CARD_WIDTH_MAP[carouselVersion]} ${className}`}
+      className={`flex pb-9 pl-12 border-box h-full ${CARD_WIDTH_MAP[carouselVersion]} ${className}`}
     >
       <div className="relative w-full">
         <div className={`${BLOCK_CLASSES} z-10 top-9 right-12 bg-green-dark`} />
         <div className={`${BLOCK_CLASSES} z-10 top-6 right-8 bg-green`} />
         <div className={`${BLOCK_CLASSES} z-10 top-3 right-4 bg-green-light`} />
-        <div className="relative bg-white z-10 p-10 border border-solid border-green-light">
+        <div className="relative h-full bg-white z-10 p-10 border border-solid border-green-light">
           <Headline
             className="!p-0"
             title={title}

package/mobile/src/components/CarouselCatalogCard/CarouselCatalogCard.tsx

@@ -19,7 +19,7 @@ const cardStyleMap: Record<ProductColorVersion, string> = {
 export const CarouselCatalogCard = JSX<CarouselCatalogCardProps>(
   ({ className = '', title, description, image, price, button, colors, ...rest }) => (
     <BlockWrapper
-      className={`border box-border border-gray p-7 min-w-[392px] flex flex-col justify-left ${className}`}
+      className={`border box-border border-gray p-7 min-w-[392px] h-full flex flex-col justify-left ${className}`}
       {...rest}
     >
       {image?.src ? <Img className="mb-5 flex justify-center" image={image} /> : null}

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.tsx

@@ -36,7 +36,7 @@ export const CarouselRecommendationCard = JSX<RecommendationCardProps>(
     return (
       <BlockWrapper
         className={style(
-          'relative p-7 min-w-[524px] text-left box-border group-data-gray:bg-main-divider/50',
+          'relative p-7 min-w-[524px] h-full text-left box-border group-data-gray:bg-main-divider/50',
           BORDER_STYLE,
           className,
         )}

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCard.ui.json

@@ -1,14 +1,15 @@
 {
   "content": {
-    "items": {
-      "image": {
-        "ui:field": "picture"
-      }, 
-      "socialMedia": {
-        "items": {
-          "icon": {
-            "ui:field": "picture"
-          }
+    "image": {
+      "ui:field": "picture"
+    }, 
+    "socialMedia": {
+      "items": {
+        "icon": {
+          "ui:field": "icon"
+        },
+        "iconRight": {
+          "ui:field": "icon"
         }
       }
     }

package/mobile/src/components/CarouselRecommendationCard/CarouselRecommendationCardContent.ts

@@ -10,7 +10,6 @@ import type { ListContent } from '../../ui-kit/List/ListContent';
 export interface CarouselRecommendationCardContent extends HeadlineCommonProps, ListContent {
   /**
    * @title Соц сети
-   * @minItems 1
    */
   socialMedia?: ButtonWithIconProps[];
   /**

package/mobile/src/components/Footer/MediaButton.tsx

@@ -5,7 +5,7 @@ import { style } from '../../utils/style';
 import type { Picture } from '../../model/Picture';
 import type { IconVersion } from '../../model/IconVersion';
 import { Button } from '../../ui-kit/Button/Button';
-import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
 
 const ICONS_MAP: Array<{
   origins: string[];
@@ -46,7 +46,7 @@ const ICONS_MAP: Array<{
 
 export type ButtonSize = 'default' | 'small';
 
-interface MediaButtonProps extends ButtonProps {
+interface MediaButtonProps extends ButtonWithIconProps {
   iconVersion?: IconVersion;
   buttonSize?: ButtonSize;
 }

package/mobile/src/hooks/useLink.ts

@@ -8,15 +8,15 @@ interface ClickHandler {
   onClick(ev?: { preventDefault: () => void }): void;
 }
 
-export function useLink(): <L extends Partial<LinkProps & ClickHandler>>(
-  props: L,
-) => L & ClickHandler {
+export function useLink(
+  isRemote?: boolean,
+): <L extends Partial<LinkProps & ClickHandler>>(props: L) => L & ClickHandler {
   const router = useRouter();
   const blockRouter = useBlockRouter();
 
   const handleLocalURL =
     (href: string | undefined, target?: Target) => (ev?: { preventDefault: () => void }) => {
-      if (!isLocalURL(href, target)) {
+      if (isRemote || !isLocalURL(href, target)) {
         // Proceed with native handle
         return;
       }

package/mobile/src/services/sitemap/findActiveSubItem.ts

@@ -1,12 +1,12 @@
 import type { Router } from '../../hooks/useRouter';
 import type { LinkProps } from '../../model/LinkProps';
 import { maxBy } from '../../utils/maxBy';
-import { isSubItemActive } from './isSubItemActive';
+import { isHrefActive } from './isHrefActive';
 
 export const findActiveSubItem =
   (router: Router) =>
   <T extends LinkProps>(items: T[] = []): T | undefined => {
-    const possibleActiveSubItems = items?.filter(isSubItemActive(router));
+    const possibleActiveSubItems = items?.filter(isHrefActive(router));
 
     return possibleActiveSubItems?.length
       ? maxBy((_: T) => _.href?.length || 0)(possibleActiveSubItems) // More specific item with max length

package/mobile/src/services/sitemap/isHrefActive.ts

@@ -1,7 +1,7 @@
-import { adjustHref } from '../../utils/adjustHref';
-import { getPathname, isURL, withoutQuery } from '../../utils/url';
+import type { Router } from '../../hooks/useRouter';
+import { isURL, withoutQuery } from '../../utils/url';
 
-export const isHrefActive = (href: string | undefined, router: { href?: string }) =>
-  withoutQuery(isURL(href) ? router.href : getPathname(router.href)).startsWith(
-    withoutQuery(adjustHref(href)),
-  );
+export const isHrefActive =
+  (router: Router) =>
+  ({ href }: { href?: string }): boolean =>
+    withoutQuery(isURL(href) ? router.href : router.pathname).startsWith(withoutQuery(href));

package/mobile/src/services/sitemap/isTopItemActive.ts

@@ -1,8 +1,8 @@
+import type { Router } from '../../hooks/useRouter';
 import { isHrefActive } from './isHrefActive';
-import { isSubItemActive } from './isSubItemActive';
 import { TopMenuItem } from './SitemapProps';
 
 export const isTopItemActive =
-  (router: { href?: string }) =>
+  (router: Router) =>
   (topItem: TopMenuItem): boolean =>
-    topItem.items?.some(isSubItemActive(router)) || isHrefActive(topItem.href, router);
+    topItem.items?.some(isHrefActive(router)) || isHrefActive(router)(topItem);

package/mobile/src/ui-kit/TopItem/TopItem.tsx

@@ -15,7 +15,7 @@ export interface TopItemProps extends TopItemContent {
 }
 
 export const TopItem = JSX<TopItemProps>(({ className = '', active, flat, children, ...rest }) => {
-  const link = useLink();
+  const link = useLink(true);
   const { href, target, text, onClick } = link(rest);
 
   return (

package/mobile/src/utils/url.ts

@@ -1,18 +1,10 @@
 import type { Target } from '../model/LinkProps';
-import { projectSettings } from '../ProjectSettings';
 
 export const isURL = (href?: string): href is `${string}//${string}` =>
   Boolean(href?.includes('//'));
 
 export const isLocalURL = (href: string | undefined, target?: Target) =>
-  Boolean(
-    href &&
-      !isURL(href) &&
-      (projectSettings.BASE_PATH
-        ? href.startsWith(projectSettings.BASE_PATH)
-        : !href.startsWith('/')) &&
-      (!target || target === '_self'),
-  );
+  Boolean(href && !isURL(href) && (!target || target === '_self'));
 
 export const isHash = (href?: string): href is `#${string}` => Boolean(href?.startsWith('#'));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "private": false,
   "license": "MIT",
   "author": "ЦК",
@@ -119,7 +119,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@redneckz/uni-jsx": "^2.1.7",
+    "@redneckz/uni-jsx": "^2.3.4",
     "glob": "^8.0.3",
     "rehype-parse": "^8.0.4",
     "rehype-sanitize": "^5.0.1",
@@ -188,7 +188,7 @@
       "path": "lib/common.css"
     },
     {
-      "limit": "50 kB",
+      "limit": "51 kB",
       "path": "bundle/bundle.umd.min.js"
     }
   ],

package/src/common.css

@@ -92,6 +92,23 @@ html {
     text-fill-color: transparent;
   }
 
+  .gradient-color-text-on-green {
+    background: linear-gradient(180deg, #cec833 0%, #7dae3c 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+    opacity: 0.5;
+  }
+
+  .gradient-color-text-on-yellow {
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+      linear-gradient(180deg, #cec833 0%, #7dae3c 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+    opacity: 0.5;
+  }
+
   input[type='range'].slider {
     -webkit-appearance: none;
     height: 4px;

package/src/components/Blocks.ts

@@ -10,6 +10,7 @@ import { ButtonBlock } from './ButtonBlock/ButtonBlock';
 import { Calculator } from './Calculator/Calculator';
 import { CardTransfer } from './CardTransfer/CardTransfer';
 import { Carousel } from './Carousel/Carousel';
+import { CarouselBankHistoryCard } from './CarouselBankHistoryCard/CarouselBankHistoryCard';
 import { CarouselCard } from './CarouselCard/CarouselCard';
 import { CarouselCatalogCard } from './CarouselCatalogCard/CarouselCatalogCard';
 import { CarouselInvestmentCard } from './CarouselInvestmentCard/CarouselInvestmentCard';
@@ -71,6 +72,7 @@ export const Blocks: BlocksRegistry = {
   Calculator,
   CardTransfer,
   Carousel,
+  CarouselBankHistoryCard,
   CarouselCard,
   CarouselCatalogCard,
   CarouselInvestmentCard,

package/src/components/Carousel/Carousel.fixture.tsx

@@ -1,6 +1,7 @@
 import type { BlockRendererOptions } from '../../BlockRenderer/BlockRendererOptions';
 import '../../setup-fixture';
 import { Blocks } from '../Blocks';
+import { BANK_HISTORY_CARD } from '../CarouselBankHistoryCard/CarouselBankHistoryCard.fixture';
 import { CARD, CARD_MINI, CARD_NEW } from '../CarouselCard/CarouselCard.fixture';
 import { CATALOG_CARD } from '../CarouselCatalogCard/CarouselCatalogCard.fixture';
 import { INVESTMENT_CARD_WITH_SINGLE_COLUMN } from '../CarouselInvestmentCard/CarouselInvestmentCard.fixture';
@@ -175,4 +176,23 @@ export default {
       />
     </div>
   ),
+  'bank-history': (
+    <div className="container grid grid-cols-12">
+      <Carousel
+        className="col-span-12"
+        isBlur={false}
+        isCyclic={false}
+        arrowsPadded={false}
+        visibleItemCount={3}
+        block={{
+          type: 'Carousel',
+          blocks: new Array(6).fill({
+            type: 'CarouselBankHistoryCard',
+            content: BANK_HISTORY_CARD,
+          }),
+        }}
+        options={options}
+      />
+    </div>
+  ),
 };