@redneckz/wildless-cms-uni-blocks 0.3.73 → 0.3.75

package/src/components/Catalog/Catalog.fixture.tsx

@@ -0,0 +1,48 @@
+import type { Picture } from '../../model/Picture';
+import { context } from '../../react/setup-fixture';
+import type { ButtonCommonProps } from '../../ui-kit/Button/Button';
+import { Catalog, CatalogProps } from './Catalog';
+import type { CatalogProductColor } from './CatalogContent';
+
+const payRing: Picture = {
+  src: 'pay-ring.png',
+  format: 'webp',
+  size: {
+    width: 230,
+    height: 230,
+  },
+  title: 'pay-ring',
+};
+
+const colors: CatalogProductColor[] = ['black', 'white'];
+
+const buttonPrimary: ButtonCommonProps = {
+  href: '/credit-cards',
+  text: 'Подробнее',
+  target: '_blank',
+  version: 'primary',
+};
+
+const catalogCard = {
+  title: 'SATURN S-VI',
+  description: 'Керамическое кольцо с глянцевой поверхностью и огранкой по внешним контурам',
+  image: payRing,
+  price: 5600,
+  colors: colors,
+  button: buttonPrimary,
+};
+
+export const defaultProps: CatalogProps = {
+  context,
+  title: 'Каталог',
+  description: 'Описание',
+  cards: new Array(5).fill(catalogCard).flat(),
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <Catalog {...defaultProps} className="col-span-12" />
+    </div>
+  ),
+};

package/src/components/Catalog/Catalog.tsx

@@ -0,0 +1,73 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
+import { Description } from '../../ui-kit/Description/Description';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import type { ContentPageContext } from '../ContentPage/ContentPageContext';
+import { CatalogCard } from './CatalogCard';
+import type { CatalogCardType, CatalogContent } from './CatalogContent';
+
+export interface CatalogProps extends CatalogContent, UniBlockProps {}
+
+const BLUR_BLOCK_CLASSES = 'absolute top-0 bottom-0 w-[84px]';
+const CARD_FULL_VIEW_COUNT = 3;
+const CARD_SHIFT = 430;
+
+export const Catalog = JSX<CatalogProps>(
+  ({ context, cards = [], className = '', title, description }) => {
+    const [activeCardIndex, setActiveCardIndex] = context.useState(0);
+
+    return (
+      <section
+        className={`bg-white relative font-sans p-9 overflow-hidden text-center ${className}`}
+      >
+        {title ? <Heading headingType="h2" className="mb-6" title={title} /> : null}
+        {description ? <Description className="mb-6" description={description} /> : null}
+        <div
+          className="flex duration-1000 gap-3.5"
+          style={{ transform: `translateX(-${activeCardIndex * CARD_SHIFT}px)` }}
+          role="list"
+        >
+          {cards?.length ? cards.map(renderCatalogCard(context)) : null}
+        </div>
+        {renderNavButtons({
+          cardsCount: cards.length,
+          activeCardIndex,
+          setActiveCardIndex,
+        })}
+        <div className={`${BLUR_BLOCK_CLASSES} left-0 ${'bg-opacity-from-white'}`} />
+        <div className={`${BLUR_BLOCK_CLASSES} right-0 ${'bg-opacity-to-white'}`} />
+      </section>
+    );
+  },
+);
+
+const renderCatalogCard = (context: ContentPageContext) => (card: CatalogCardType, i: number) => {
+  return <CatalogCard key={String(i)} context={context} {...card} />;
+};
+
+interface RenderNavButtonsProps {
+  cardsCount: number;
+  activeCardIndex: number;
+  setActiveCardIndex: (number) => void;
+}
+
+const renderNavButtons = ({
+  cardsCount,
+  activeCardIndex,
+  setActiveCardIndex,
+}: RenderNavButtonsProps) => {
+  const handleNextClick = () => setActiveCardIndex(activeCardIndex + 1);
+  const handlePrevClick = () => setActiveCardIndex(activeCardIndex - 1);
+
+  const isUseSlider = cardsCount > CARD_FULL_VIEW_COUNT;
+  const showNextButton = isUseSlider && cardsCount - activeCardIndex > CARD_FULL_VIEW_COUNT;
+  const showPrevButton = isUseSlider && activeCardIndex > 0;
+
+  return renderArrows({
+    handler: [handlePrevClick, handleNextClick],
+    isShown: [showPrevButton, showNextButton],
+    btnClass: ['left-8', 'right-8'],
+    className: 'top-1/2 z-10 mt-6',
+  });
+};

package/src/components/Catalog/CatalogCard.tsx

@@ -0,0 +1,47 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { BlockVersion } from '../../model/BlockVersion';
+import type { UniBlockProps } from '../../types';
+import { Button } from '../../ui-kit/Button/Button';
+import { Heading } from '../../ui-kit/Heading/Heading';
+import { Img } from '../../ui-kit/Img/Img';
+import type { CatalogCardType, CatalogProductColor } from './CatalogContent';
+
+export interface CatalogCardProps extends CatalogCardType, UniBlockProps {
+  version?: BlockVersion;
+}
+
+const cardStyleMap: Record<CatalogProductColor, string> = {
+  black: 'bg-black',
+  white: 'bg-white',
+};
+
+export const CatalogCard = JSX<CatalogCardProps>(
+  ({ className = '', title, description, image, price, button, colors }) => {
+    return (
+      <section
+        className={`border border-solid box-border p-[30px] min-w-[402px] flex flex-col justify-left ${className}`}
+        role="listitem"
+      >
+        {image?.src ? <Img className="mb-5" image={image} /> : null}
+        {title ? (
+          <Heading headingType="h6" as="h5" className="text-left mb-1.5" title={title} />
+        ) : null}
+        {description ? <div className="text-m-md text-left mb-4">{description}</div> : null}
+        {colors?.length ? (
+          <div className="flex mb-4 text-m-md text-secondary-text">
+            Доступные цвета: {colors.map(renderColorOption)}
+          </div>
+        ) : null}
+        {price ? <div className="text-title-sm text-left">{price}&nbsp;₽</div> : null}
+        {button?.text ? <Button className="mt-6 w-full" {...button} /> : null}
+      </section>
+    );
+  },
+);
+
+const renderColorOption = (color: CatalogProductColor, i: number) => (
+  <span
+    key={String(i)}
+    className={`w-6 h-6 ml-3 border border-solid border-main-divider rounded-full ${cardStyleMap[color]}`}
+  />
+);

package/src/components/Catalog/CatalogContent.ts

@@ -0,0 +1,26 @@
+import type { ButtonWithIconProps } from '../../ui-kit/Button/ButtonProps';
+import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
+import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { ImageContent } from '../../ui-kit/Img/ImgProps';
+
+/**
+ * @enumNames ["Черный", "Белый"]
+ */
+export type CatalogProductColor = 'black' | 'white';
+
+export interface CatalogCardType extends HeadingContent, DescriptionContent, ImageContent {
+  /** @title Цена в рублях */
+  price?: number;
+  /** @title Доступные цвета */
+  colors?: CatalogProductColor[];
+  /** @title Кнопка */
+  button?: ButtonWithIconProps;
+}
+
+/**
+ * @title Каталог
+ */
+export type CatalogContent = HeadingContent &
+  DescriptionContent & {
+    cards?: CatalogCardType[];
+  };

package/src/components/ComparisonTable/TableColumn.tsx

@@ -21,6 +21,7 @@ export const TableColumn = JSX<TableColumnProps>(
     const columnDataView = columnData?.slice(0, showRow ? columnData.length : visibleRowLength);
     const gradientClassName = isFillGradient ? GRADIENT : '';
     const buttonVersion: ButtonVersion = isFillGradient ? 'secondary' : 'primary';
+
     return (
       <div
         className={`border border-main-stroke rounded-md p-4 mb-3.5 ${gradientClassName}`}

package/src/components/ContentPage/ContentPage.tsx

@@ -108,12 +108,14 @@ function renderBlock(
     console.warn(`No block with "${type}" is registered`);
   }
   const BlockComponent = blocksRegistry[type || 'Placeholder'] || Placeholder;
+
   return blockDecorator(
     {
       blockClassName: `scroll-mt-12 ${style2className(block.style)}`,
       block,
       render: (props) => {
         const { version, content, anchor } = props.block;
+
         return (
           <BlockComponent
             key={`${type}-${i}`}

package/src/components/ContentPage/ContentPageHead.tsx

@@ -9,6 +9,7 @@ export interface ContentPageHeadProps {
 export const ContentPageHead = JSX<ContentPageHeadProps>(({ HeadComponent, data, children }) => {
   const { title, main, og, twitter, jsonLd } = data;
   const { description, keywords, canonical, robots } = main || {};
+
   return (
     <HeadComponent>
       <title>{title}</title>

package/src/components/ContentPage/normalizeBlock.mobile.ts

@@ -2,5 +2,6 @@ import { BlockDef } from '../../types';
 
 export function normalizeBlock(block: BlockDef) {
   const { mobile, ...rest } = block;
+
   return mobile ? { ...rest, ...mobile, content: { ...rest.content, ...mobile.content } } : block;
 }

package/src/components/ContentPage/normalizeBlock.ts

@@ -3,5 +3,6 @@ import { BlockDef } from '../../types';
 export function normalizeBlock(block: BlockDef) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { mobile, ...rest } = block;
+
   return rest;
 }

package/src/components/ExchangeRateTile/CurrencyTable.tsx

@@ -32,6 +32,7 @@ export const CurrencyTable = JSX<CurrencyTableProps>(({ className, exchangeCurre
 
 const renderCurrencyRow = (exchangeCurrencyItem: ExchangeCurrencyItem) => {
   const code = exchangeCurrencyItem?.code;
+
   return (
     <tr key={code} className="pb-1">
       <td className="pt-4">

package/src/components/ExchangeRateTile/calculateResult.ts

@@ -2,6 +2,7 @@ import { roundTo } from '../../utils/roundTo';
 
 export const calculateResult = (value: string, rate: number, precision: boolean) => {
   const result = Number(formatValue(value)) * Math.pow(rate, precision ? -1 : 1);
+
   return Number.isInteger(result) ? result : roundTo(result);
 };
 

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

@@ -28,6 +28,7 @@ export const Footer = JSX<FooterProps>(
   }) => {
     const sitemap = useSitemap(context.useAsyncData);
     const dispositions = sitemap?.dispositions;
+
     return (
       <footer className={`px-4 py-[26px] bg-white ${className}`}>
         <Contacts className="overflow-hidden" items={contacts} context={context} hasButton />
@@ -57,6 +58,7 @@ export const Footer = JSX<FooterProps>(
 
 const renderSubMenuItem = (menu: SubMenuItem, i: number) => {
   const { icon, href, text } = menu;
+
   return (
     <Button version="link" key={`footer-${i}`} href={href} className="flex text-sm mb-4">
       {icon ? <Img className="pr-1" image={icon} width="24" height="24" asSVG /> : null}

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

@@ -13,6 +13,7 @@ export interface SocialMediaProps extends UniBlockProps {
 export const SocialMedia = JSX<SocialMediaProps>(({ className, media, version, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`flex gap-2 items-start justify-start pt-6 pb-6 ${className || ''}`}>
       {media?.map((_, index) => (

package/src/components/Footer/SocialMedia.tsx

@@ -14,6 +14,7 @@ export const SocialMedia = JSX<SocialMediaProps>(
   ({ className = '', media, version, context, children }) => {
     const router = context.useRouter();
     const { handlerDecorator } = context;
+
     return (
       <div>
         <div className={`flex gap-2.5 ${className}`}>

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

@@ -6,6 +6,7 @@ import type { FooterLink } from './FooterLink';
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`${className || ''}`}>
       <div className="py-6">

package/src/components/Footer/TextInformation.tsx

@@ -6,6 +6,7 @@ import type { FooterLink } from './FooterLink';
 export const TextInformation = JSX<FooterLink>(({ className, links, context }) => {
   const router = context.useRouter();
   const { handlerDecorator } = context;
+
   return (
     <div className={`${className || ''}`}>
       <div className="pt-5">

package/src/components/Gallery/GalleryCardInner.tsx

@@ -8,6 +8,7 @@ import type { GalleryCard, GalleryItem } from './GalleryContent';
 export const GalleryCardInner = JSX<GalleryCard>(
   ({ title, description, image, items, button, version, isDotted = true }) => {
     const titleStyleClasses = getTitleStyle(version);
+
     return (
       <div className="h-full flex flex-col justify-between text-center">
         <div>

package/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -24,6 +24,7 @@ export const renderBlock = (context: ContentPageContext) => (block: GroupBlockDe
   }
   const classNameBlock = style2className(block?.style);
   const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+
   return (
     <EmbeddedBlock key={`block_${i}`} context={context} {...block} className={classNameBlock} />
   );

package/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -19,6 +19,7 @@ export const renderBlock =
     }
     const classNameBlock = style2className(block?.style);
     const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+
     return (
       <div className={className} key={`block_${i}`}>
         <EmbeddedBlock context={context} {...block} className={classNameBlock} />

package/src/components/Header/HeaderBurger.tsx

@@ -15,6 +15,7 @@ export interface HeaderBurgerProps {
 export const HeaderBurger = JSX<HeaderBurgerProps>(
   ({ context, burgerSubMenu, onClick, defaultLocation = '', children }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
+
     return (
       <div className="absolute top-0 left-0 w-full h-full bg-white p-4 box-border z-20">
         <button
@@ -46,6 +47,7 @@ export const HeaderBurger = JSX<HeaderBurgerProps>(
 
 const renderBurgerSubMenuItem = (menu: DispositionItem, i: number) => {
   const { icon, href, text } = menu;
+
   return (
     <a key={`headerSubMenu-${i}`} href={href} className="flex text-sm mb-4 hover:text-primary-main">
       {icon ? (

package/src/components/Header/HeaderSecondaryMenu.tsx

@@ -29,6 +29,7 @@ const LINKS_ICON_VERSION_MAP: Record<BgColorVersion, IconVersion> = {
 export const HeaderSecondaryMenu = JSX<HeaderSecondaryMenuProps>(
   ({ context, className, defaultLocation = '', bgColor = 'bg-white' }) => {
     const [city, getCity] = context.useGeolocation(defaultLocation);
+
     return (
       <div className={`flex items-center ${className || ''}`}>
         <TopItem

package/src/components/Headline/Headline.mobile.tsx

@@ -18,6 +18,7 @@ export const Headline = JSX<HeadlineProps>(
     align = 'left',
   }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+
     return (
       <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
         {title ? (

package/src/components/Insurance/Insurance.example.json

@@ -17,5 +17,13 @@
         "icon": "ShieldTickIcon"
       }
     }
-  ]
+  ],
+  "image": {
+    "format": "webp",
+    "size": {
+      "width": 400,
+      "height": 300
+    }
+  },
+  "sum": 500000
 }

package/src/components/Insurance/Insurance.tsx

@@ -10,23 +10,17 @@ export interface InsuranceProps extends InsuranceContent, UniBlockProps {}
 export const Insurance = JSX<InsuranceProps>(
   ({ className = '', title, description, image, benefits, sum, monthLimit }) => {
     return (
-      <section className={`px-[100px] py-[50px] bg-white text-primary-text ${className}`}>
+      <section className={`px-[100px] py-[50px] bg-white text-primary-text font-sans ${className}`}>
         {title ? <Heading headingType="h3" title={title} className="text-center" /> : null}
         {description ? <div className="text-center text-md mt-3">{description}</div> : null}
         <div>
-          <div className="mt-5 mx-auto flex justify-center gap-[120px] mt-[30px]">
+          <div className="mt-5 mx-auto flex justify-center gap-[122px] mt-[30px]">
             {image?.src ? <Img image={image} /> : null}
             <div className="w-[558px] m-auto">
               {benefits ? (
                 <div className="flex flex-col gap-4">{benefits.map(renderBenefit)}</div>
               ) : null}
-
-              <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
-                {sum ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
-                {monthLimit
-                  ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
-                  : null}
-              </div>
+              {renderInsuranceSumMonth(sum, monthLimit)}
             </div>
           </div>
         </div>
@@ -37,28 +31,40 @@ export const Insurance = JSX<InsuranceProps>(
 
 function renderBenefit(benefit: InsuranceBenefit, i: number) {
   return (
-    <div key={String(i)} className="flex items-center gap-5">
+    <div key={String(i)} className="flex items-center gap-4">
       {benefit?.icon ? (
         <Img
-          className="w-[50px] h-[50px] min-w-[50px] p-3 rounded-full bg-secondary-light"
+          className="w-12 h-12 min-w-12 p-3 rounded-full bg-secondary-light"
           image={benefit.icon}
-          width="24"
-          height="24"
           asSVG
         />
       ) : null}
       <div>
-        {benefit?.label ? <div className="text-title-2xs">{benefit.label}</div> : null}
+        {benefit?.label ? <div className="text-title-2xs font-normal">{benefit.label}</div> : null}
         {benefit?.description ? (
-          <div className="mt-2 font-light text-secondary-text">{benefit.description}</div>
+          <div className="mt-0.5 font-light text-secondary-text font-light">
+            {benefit.description}
+          </div>
         ) : null}
       </div>
     </div>
   );
 }
 
+function renderInsuranceSumMonth(sum, monthLimit) {
+  return sum || monthLimit ? (
+    <div className="bg-secondary-light h-15 flex mt-7 gap-6 px-5 py-4">
+      {Number.isFinite(sum) ? renderValueBlock('Страховая сумма:', sum, Boolean(monthLimit)) : null}
+      {Number.isFinite(monthLimit)
+        ? renderValueBlock('Ежемесячный лимит:', monthLimit, Boolean(sum))
+        : null}
+    </div>
+  ) : null;
+}
+
 function renderValueBlock(title, sum, isAnotherBlock) {
   const widthStyle = isAnotherBlock ? 'w-fit' : 'w-full';
+
   return (
     <div className={`flex justify-between items-center gap-2 w-full ${widthStyle}`}>
       <span className="text-secondary-text text-base">{title}</span>

package/src/components/Insurance/InsuranceContent.ts

@@ -1,5 +1,4 @@
 import type { Picture } from '../../model/Picture';
-import type { InsuranceProps } from '../../model/Insurance';
 
 /**
  * @title Преимущество
@@ -12,12 +11,19 @@ export interface InsuranceBenefit {
   icon?: Picture;
 }
 
-export type InsuranceContent = InsuranceProps & {
+/**
+ * @title Страховка
+ */
+export type InsuranceContent = {
   /** @title Заголовок */
   title?: string;
   /** @title Описание */
   description?: string;
   image?: Picture;
+  /** @title Ежемесячный лимит */
+  monthLimit?: number;
+  /** @title Страховая сумма */
+  sum?: number;
   /**
    * @title Список преимуществ
    * @maxItems 6

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.example.json

@@ -6,8 +6,8 @@
   },
   "insuranceTabs": [
     {
-      "title": "Описание",
-      "card": [
+      "title": "Описание 1",
+      "cards": [
         {
           "sum": 200000,
           "fee": 2100,
@@ -21,8 +21,8 @@
       ]
     },
     {
-      "title": "Описание",
-      "card": [
+      "title": "Описание 2",
+      "cards": [
         {
           "sum": 200000,
           "fee": 2100,

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.fixture.tsx

@@ -38,11 +38,6 @@ export default {
                 fee: 3600,
                 icon: { icon: 'ActualBalanceIcon' },
               },
-              {
-                sum: 600000,
-                fee: 3600,
-                icon: { icon: 'MoneyInsuranceIcon' },
-              },
             ],
           },
         ]}

package/src/components/InsuranceAmountBlock/InsuranceAmountBlock.tsx

@@ -9,7 +9,6 @@ export interface InsuranceAmountBlockProps extends InsuranceAmountBlockContent,
 
 export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   ({ className = '', context, title, insuranceTabs = [], button, anchor = null }) => {
-    const insuranceGalleries = insuranceTabs.map((_) => _.cards);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
 
     return (
@@ -36,7 +35,7 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
           {renderInsuranceGalleries({
             context,
             className,
-            insuranceGalleries,
+            insuranceTabs,
           })}
         </div>
         {button?.text ? (
@@ -55,7 +54,13 @@ export const InsuranceAmountBlock = JSX<InsuranceAmountBlockProps>(
   },
 );
 
-const renderInsuranceGalleries = ({ insuranceGalleries, context, className }: any) => {
+const renderInsuranceGalleries = ({
+  insuranceTabs,
+  context,
+  className = '',
+}: InsuranceAmountBlockProps) => {
+  const insuranceGalleries = insuranceTabs?.map((_) => _.cards);
+
   return insuranceGalleries?.length
     ? insuranceGalleries.map((cards) => (
         <InsuranceAmountBlockInner context={context} className={className} cards={cards} />

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockContent.ts

@@ -1,14 +1,16 @@
 import type { Picture } from '../../model/Picture';
 import type { ButtonProps } from '../../ui-kit/Button/ButtonProps';
-import type { InsuranceProps } from '../../model/Insurance';
 
 /**
  * @title Кнопка выбора программы
  */
-export type cardItem = InsuranceProps & {
+export type CardItem = {
+  /** @title Иконка */
   icon?: Picture;
   /** @title Страховой взнос */
   fee?: number;
+  /** @title Страховая сумма */
+  sum?: number;
 };
 
 /**
@@ -18,7 +20,7 @@ export interface InsuranceAmountBlockTabs {
   /** @title Заголовок вкладки */
   title?: string;
   /** @title Содержимое вкладки */
-  cards?: cardItem[];
+  cards?: CardItem[];
 }
 
 /**

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps, FuncReturnVoid } from '../../types';
-import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
+import type { InsuranceAmountBlockTabs, CardItem } from './InsuranceAmountBlockContent';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
 import { renderArrows } from '../../ui-kit/Button/renderArrows';
@@ -9,14 +9,14 @@ export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs
 
 type InsuranceGalleryProps = {
   tabsShift: number;
-  cards: cardItem[];
+  cards: CardItem[];
   activeSlideIndex: number;
   isLastShift: boolean;
   setActiveSlideIndex: FuncReturnVoid<number>;
 };
 
 type InsuranceSlideProps = {
-  slide: cardItem;
+  slide: CardItem;
   i: number;
   activeSlideIndex: number;
   onClick: FuncReturnVoid<MouseEvent>;
@@ -30,7 +30,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     const handleNextClick = () => setTabsShift(tabsShift + 1);
     const handlePrevClick = () => setTabsShift(tabsShift - 1);
 
-    const galleryLength = cards?.length;
+    const galleryLength = cards?.length ?? 0;
 
     const isGalleryScrollAvailable = cards?.length > 2;
     const showNextButton = isGalleryScrollAvailable && galleryLength > tabsShift + 2;
@@ -40,7 +40,7 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
     return (
       <section id={anchor} className={`min-w-full ${className}`}>
         <div className="relative mt-7 overflow-hidden">
-          {galleryLength > 1
+          {galleryLength
             ? renderGallery({
                 tabsShift,
                 cards,
@@ -75,6 +75,7 @@ function renderGallery({
   setActiveSlideIndex,
 }: InsuranceGalleryProps) {
   const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
+
   return (
     <div
       style={{ transform: `translateX(-${tabsShiftWidth}px)` }}