@redneckz/wildless-cms-uni-blocks 0.3.70 → 0.3.72

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Picture } from '../../model/Picture';
 import { Headline } from './Headline';
@@ -38,19 +38,39 @@ const secondaryProps: HeadlineContent = {
 };
 
 export default {
-  default: (
+  'default left alignment': (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...defaultProps} align="left" />
+    </div>
+  ),
+  'default center alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...defaultProps} align="center" />
+    </div>
+  ),
+  'default right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...defaultProps} align="right" />
     </div>
   ),
 
-  primary: (
+  'primary left alignment': (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...primaryProps} align="left" />
+    </div>
+  ),
+  'primary center alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...primaryProps} align="center" />
+    </div>
+  ),
+  'primary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...primaryProps} align="right" />
+    </div>
+  ),
+  'primary without description': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
@@ -58,6 +78,10 @@ export default {
         image={image}
         bgColorHeadline="primary"
       />
+    </div>
+  ),
+  'primary without title': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
@@ -67,11 +91,24 @@ export default {
       />
     </div>
   ),
-  secondary: (
+
+  'secondary left alignment': (
     <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...secondaryProps} align="left" />
+    </div>
+  ),
+  'secondary center alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...secondaryProps} align="center" />
+    </div>
+  ),
+  'secondary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...secondaryProps} align="right" />
+    </div>
+  ),
+  'secondary without description': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}
@@ -79,6 +116,10 @@ export default {
         image={image}
         bgColorHeadline="secondary"
       />
+    </div>
+  ),
+  'secondary without title': (
+    <div className="container grid grid-cols-12">
       <Headline
         className="col-span-12"
         context={context}

package/src/components/Headline/Headline.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Headline } from './Headline';
 import { HeadlineContent } from './HeadlineContent';
@@ -20,24 +20,48 @@ export const HEADLINE_SECONDARY: HeadlineContent = {
 };
 
 export default {
-  default: (
+  'default left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE} />
       <Headline className="col-span-12" context={context} {...HEADLINE} align="left" />
+    </div>
+  ),
+  'default center alignment': (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE} />
+    </div>
+  ),
+  'default right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE} align="right" />
     </div>
   ),
-  primary: (
+  'primary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} />
       <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="left" />
+    </div>
+  ),
+  'primary center alignment': (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} />
+    </div>
+  ),
+  'primary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE_PRIMARY} align="right" />
     </div>
   ),
-  secondary: (
+  'secondary left alignment': (
     <div className="container grid grid-cols-12">
-      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} />
       <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="left" />
+    </div>
+  ),
+  'secondary center alignment': (
+    <div className="container grid grid-cols-12">
+      <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} />
+    </div>
+  ),
+  'secondary right alignment': (
+    <div className="container grid grid-cols-12">
       <Headline className="col-span-12" context={context} {...HEADLINE_SECONDARY} align="right" />
     </div>
   ),

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

@@ -19,7 +19,7 @@ export const Headline = JSX<HeadlineProps>(
   }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
     return (
-      <section className={`px-4 py-6 ${STYLE_MAPS.background} ${className}`}>
+      <section className={`px-4 py-6 flex flex-col gap-2.5 ${STYLE_MAPS.background} ${className}`}>
         {title ? (
           <Heading
             headingType="h2"
@@ -29,15 +29,13 @@ export const Headline = JSX<HeadlineProps>(
         ) : null}
         {description ? (
           <p
-            className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]} ${
-              title ? 'mt-2.5' : ''
-            }`}
+            className={`font-normal text-m-md ${STYLE_MAPS.description} ${ALIGN_TEXT[align]}            `}
           >
             {description}
           </p>
         ) : null}
         {image?.src && (
-          <div className="mt-5 mx-auto flex justify-center">
+          <div className="mt-2.5 mx-auto flex justify-center">
             <Img image={image} />
           </div>
         )}

package/src/components/Headline/Headline.tsx

@@ -15,21 +15,24 @@ export const Headline = JSX<HeadlineProps>(
     title,
     description,
     anchor = null,
+    headingType = 'h2',
   }) => {
     const STYLE_MAPS = HEADLINE_BLOCK_STYLE_MAPS[bgColorHeadline];
+
     return (
-      <section className={`p-[50px] ${STYLE_MAPS.background} ${className}`} id={anchor}>
+      <section
+        className={`p-[50px] flex flex-col gap-4 ${STYLE_MAPS.background} ${className}`}
+        id={anchor}
+      >
         {title ? (
           <Heading
-            headingType="h2"
+            headingType={headingType}
             className={`text-primary-text ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}
             title={title}
           />
         ) : null}
         {description ? (
-          <p className={`font-normal text-base mt-4 ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}>
-            {description}
-          </p>
+          <p className={`text-base ${STYLE_MAPS.text} ${ALIGN_TEXT[align]}`}>{description}</p>
         ) : null}
       </section>
     );

package/src/components/Headline/HeadlineContent.ts

@@ -1,6 +1,6 @@
 import type { BlockVersionWithTransparent } from '../../model/BlockVersion';
 import type { DescriptionContent } from '../../ui-kit/Description/DescriptionContent';
-import type { HeadingContent } from '../../ui-kit/Heading/HeadingContent';
+import type { HeadingContent, HeadingType } from '../../ui-kit/Heading/HeadingContent';
 import type { ImageContent } from '../../ui-kit/Img/ImgProps';
 import type { AlignType } from '../../model/AlignType';
 
@@ -12,4 +12,5 @@ export type HeadlineContent = HeadingContent &
   ImageContent & {
     align?: AlignType;
     bgColorHeadline?: BlockVersionWithTransparent;
+    headingType?: HeadingType;
   };

package/src/components/Insurance/Insurance.fixture.tsx

@@ -1,5 +1,5 @@
 import { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { Benefit } from '../BenefitsBlock/BenefitsBlockContent';
 import { Insurance } from './Insurance';
 
@@ -40,7 +40,7 @@ const image: Picture = {
 };
 
 export default {
-  default: (
+  'without monthly payment': (
     <div className="container grid grid-cols-12">
       <Insurance
         context={context}
@@ -51,6 +51,10 @@ export default {
         image={image}
         sum={500000}
       />
+    </div>
+  ),
+  'with monthly payment': (
+    <div className="container grid grid-cols-12">
       <Insurance
         context={context}
         className="col-span-12"

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { InsuranceAmountBlock } from './InsuranceAmountBlock';
 
 export default {

package/src/components/InsuranceAmountBlock/InsuranceAmountBlockInner.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps, FuncReturnVoid } from '../../types';
 import type { InsuranceAmountBlockTabs, cardItem } from './InsuranceAmountBlockContent';
-import { ArrowButton } from '../../ui-kit/Button/ArrowButton';
 import { Img } from '../../ui-kit/Img/Img';
 import { addSpacesBetweenNumbers } from '../../utils/addSpacesBetweenNumbers';
+import { renderArrows } from '../../ui-kit/Button/renderArrows';
 
 export interface InsuranceAmountBlockInnerProps extends InsuranceAmountBlockTabs, UniBlockProps {}
 
@@ -22,9 +22,6 @@ type InsuranceSlideProps = {
   onClick: FuncReturnVoid<MouseEvent>;
 };
 
-const arrowBtnStyle =
-  'absolute w-12 h-12 min-h-12 max-h-12 top-1 z-10 mt-[25px] bg-white rounded-full text-primary-text';
-
 export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
   ({ className = '', context, cards = [], anchor = null }) => {
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
@@ -52,27 +49,17 @@ export const InsuranceAmountBlockInner = JSX<InsuranceAmountBlockInnerProps>(
                 setActiveSlideIndex,
               })
             : null}
+          {renderArrows({
+            handler: [handlePrevClick, handleNextClick],
+            isShown: [showPrevButton, showNextButton],
+            btnClass: ['left-[50px]', 'right-[50px]'],
+            className: 'top-[62px]',
+          })}
           {showPrevButton ? (
-            <div>
-              <ArrowButton
-                className={`${arrowBtnStyle} left-0 top-9`}
-                onClick={handlePrevClick}
-                ariaLabel="Пролистать влево"
-                data-block-control="scroll-left"
-              />
-              <div className="absolute top-0 left-0 h-[168px] w-[84px] bg-opacity-from-white" />
-            </div>
+            <div className="absolute top-0 left-0 h-full w-[136px] bg-opacity-from-white" />
           ) : null}
           {showNextButton ? (
-            <div>
-              <ArrowButton
-                className={`${arrowBtnStyle} right-0 top-9 rotate-180`}
-                onClick={handleNextClick}
-                ariaLabel="Пролистать вправо"
-                data-block-control="scroll-right"
-              />
-              <div className="absolute top-0 right-0 h-[168px] w-[100px] bg-opacity-to-white" />
-            </div>
+            <div className="absolute top-0 right-0 h-full w-[136px] bg-opacity-to-white" />
           ) : null}
         </div>
       </section>
@@ -89,8 +76,11 @@ function renderGallery({
 }: InsuranceGalleryProps) {
   const tabsShiftWidth = isLastShift ? tabsShift * 460 - 240 : tabsShift * 460;
   return (
-    <div style={{ transform: `translateX(-${tabsShiftWidth}px)` }} className="duration-1000">
-      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px] px-[50px]">
+    <div
+      style={{ transform: `translateX(-${tabsShiftWidth}px)` }}
+      className="duration-1000 px-[50px]"
+    >
+      <div className="w-full flex flex-nowrap gap-3.5 pb-[38px]">
         {cards.map((slide, i) =>
           renderSlide({
             slide,

package/src/components/LikeControl/LikeControl.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { LikeControl } from './LikeControl';
 

package/src/components/LinkDocs/LinkDocs.example.json

@@ -1,6 +1,6 @@
 {
   "title": "Список документов",
-  "subtitle": "Описание",
+  "description": "Описание",
   "icon": {
     "icon": "DocIcon"
   },

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

@@ -1,16 +1,11 @@
-import { mobileContext } from '../../setup-fixture';
-import { linkDocsContentExample } from './linkDocsContentExample';
+import { mobileContext } from '../../react/setup-fixture';
 import { LinkDocs } from './LinkDocs';
+import { linkDocsContentExample } from './linkDocsContentExample';
 
 export default {
   'vertical (default)': (
     <div className="container grid grid-cols-12">
-      <LinkDocs
-        className="col-span-12"
-        context={mobileContext}
-        subtitle="Откройте мультивалютный вклад, чтобы распределить свои вложения"
-        {...linkDocsContentExample}
-      />
+      <LinkDocs className="col-span-12" context={mobileContext} {...linkDocsContentExample} />
     </div>
   ),
   'vertical, no border': (

package/src/components/LinkDocs/LinkDocs.fixture.tsx

@@ -1,6 +1,6 @@
-import { context } from '../../setup-fixture';
-import { linkDocsContentExample } from './linkDocsContentExample';
+import { context } from '../../react/setup-fixture';
 import { LinkDocs } from './LinkDocs';
+import { linkDocsContentExample } from './linkDocsContentExample';
 
 export default {
   'two columns (default)': (

package/src/components/LinkDocs/LinkDocs.mobile.tsx

@@ -1,9 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
 import type { LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsHorizontalList } from './LinkDocsHorizontalList';
 import { LinkDocsVerticalList } from './LinkDocsVerticalList';
+import { Headline } from '../Headline/Headline';
 
 export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
@@ -12,7 +12,7 @@ export const LinkDocs = JSX<LinkDocsProps>(
     className = '',
     context,
     title,
-    subtitle,
+    description,
     icon = { icon: 'DocIconMonoColor' },
     documents,
     orientation = 'vertical',
@@ -22,16 +22,14 @@ export const LinkDocs = JSX<LinkDocsProps>(
       <section
         className={`font-sans text-primary-text py-6 px-4 bg-white overflow-x-hidden ${className}`}
       >
-        {title ? (
-          <Heading
-            headingType="h2"
-            className={`text-center ${subtitle ? 'mb-2' : 'mb-5'}`}
-            title={title}
-          />
-        ) : null}
-        {subtitle ? (
-          <h3 className="mt-0 font-normal mb-5 text-center text-m-md">{subtitle}</h3>
-        ) : null}
+        <Headline
+          className={`!p-0 ${description ? 'gap-2' : 'gap-5'}`}
+          title={title}
+          description={description}
+          context={context}
+          align="center"
+          headingType="h3"
+        />
         {orientation === 'vertical' ? (
           <LinkDocsVerticalList hasBorder={hasBorder} documents={documents} icon={icon} />
         ) : (

package/src/components/LinkDocs/LinkDocs.tsx

@@ -1,21 +1,9 @@
 import { JSX } from '@redneckz/uni-jsx';
 import type { UniBlockProps } from '../../types';
-import { Heading } from '../../ui-kit/Heading/Heading';
-import type { AlignType } from '../../model/AlignType';
+import { Headline } from '../Headline/Headline';
 import type { LinkColumnsMode, LinkDocsContent } from './LinkDocsContent';
 import { LinkDocsList } from './LinkDocsList';
 
-const titleAlignStyleMap: Record<AlignType, string> = {
-  left: 'text-left',
-  center: 'text-center',
-  right: 'text-right',
-};
-
-const titleMarginsStyleMap: Record<LinkColumnsMode, string> = {
-  double: 'mb-8',
-  single: 'mb-[26px]',
-};
-
 const linkColumnsModeStyleMap: Record<LinkColumnsMode, string> = {
   double: 'flex gap-x-5 gap-y-[26px] flex-wrap',
   single: 'flex gap-3.5 flex-col',
@@ -25,10 +13,11 @@ export interface LinkDocsProps extends LinkDocsContent, UniBlockProps {}
 
 export const LinkDocs = JSX<LinkDocsProps>(
   ({
+    context,
     className = '',
     title,
-    subtitle,
-    align,
+    description,
+    align = 'center',
     documents,
     icon = { icon: 'DocIcon' },
     columnsMode = 'double',
@@ -36,26 +25,16 @@ export const LinkDocs = JSX<LinkDocsProps>(
   }) => {
     return (
       <section className={`font-sans text-primary-text p-[50px] bg-white ${className}`} id={anchor}>
-        {title ? (
-          <Heading
-            headingType="h2"
-            className={`${subtitle ? 'mb-2.5' : titleMarginsStyleMap[columnsMode]} ${
-              titleAlignStyleMap[align ?? 'center']
-            }`}
-            title={title}
-          />
-        ) : null}
-        {subtitle ? (
-          <h3
-            className={`text-base mt-0 font-normal ${titleMarginsStyleMap[columnsMode]} ${
-              titleAlignStyleMap[align ?? 'center']
-            }`}
-          >
-            {subtitle}
-          </h3>
-        ) : null}
+        <Headline
+          className="!p-0"
+          title={title}
+          description={description}
+          context={context}
+          align={align}
+          headingType="h3"
+        />
         <LinkDocsList
-          className={linkColumnsModeStyleMap[columnsMode]}
+          className={`mt-8 ${linkColumnsModeStyleMap[columnsMode]}`}
           columnsMode={columnsMode}
           documents={documents}
           icon={icon}

package/src/components/LinkDocs/LinkDocsContent.ts

@@ -27,7 +27,7 @@ export interface LinkDocsContent {
   /** @title Заголовок */
   title?: string;
   /** @title Описание */
-  subtitle?: string;
+  description?: string;
   /** @title Название иконки */
   icon?: Picture;
   /** @title Список */

package/src/components/LinkDocs/LinkDocsHorizontalList.tsx

@@ -11,7 +11,7 @@ export interface LinkDocsHorizontalListProps extends LinkDocsVerticalListProps {
 export const LinkDocsHorizontalList = JSX<LinkDocsHorizontalListProps>(
   ({ context, hasBorder = true, documents, icon }) => {
     return (
-      <SwipeListControl context={context} className="text-m-sm text-primary-main">
+      <SwipeListControl context={context} className="text-m-sm text-primary-main mt-5">
         {documents?.length
           ? documents.map((doc, i) => (
               <LinkDocsListItem

package/src/components/LinkDocs/LinkDocsListItemBase.tsx

@@ -44,7 +44,9 @@ const formatSuffix = (ext?: string, fileSize?: string) => {
 };
 
 const getExtFromHref = (href: string) => {
-  if (!href) return '';
+  if (!href) {
+    return '';
+  }
 
   const index = href.lastIndexOf('.');
   return index !== -1 ? href.substring(index + 1) : '';

package/src/components/LinkDocs/LinkDocsVerticalList.tsx

@@ -13,7 +13,9 @@ export const LinkDocsVerticalList = JSX<LinkDocsVerticalListProps>(
   ({ hasBorder = true, documents, icon }) => {
     return (
       <div
-        className={`text-m-sm text-primary-main flex flex-col ${hasBorder ? 'gap-3.5' : 'gap-2'}`}
+        className={`text-m-sm text-primary-main flex flex-col mt-5 ${
+          hasBorder ? 'gap-3.5' : 'gap-2'
+        }`}
         role="list"
       >
         {documents?.length

package/src/components/LinkDocs/linkDocsContentExample.ts

@@ -2,7 +2,7 @@ import type { LinkDocsContent } from './LinkDocsContent';
 
 export const linkDocsContentExample: LinkDocsContent = {
   title: 'Дополнительные документы',
-  subtitle: 'Ответы на часто задаваемые вопросы',
+  description: 'Ответы на часто задаваемые вопросы',
   documents: [
     { text: 'target self', href: '/abc1/cooldoc.doc', target: '_self' },
     { text: 'target blank', href: '/abc2/wtf.rtf', target: '_blank' },

package/src/components/LinkList/LinkList.fixture.tsx

@@ -1,4 +1,4 @@
-import { mobileContext } from '../../setup-fixture';
+import { mobileContext } from '../../react/setup-fixture';
 import { LinkList } from './LinkList';
 import { linkDocsContentExample } from './linkListContentExample';
 

package/src/components/MiniGallery/MiniGallery.fixture.tsx

@@ -1,5 +1,5 @@
 import type { Picture } from '../../model/Picture';
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { MiniGallery, MiniGalleryProps } from './MiniGallery';
 
 const image: Picture = {

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { MobileAppTile as MobileAppTileMobile } from './MobileAppTile.mobile';
 

package/src/components/MobileAppTile/MobileAppTile.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { MobileAppTile } from './MobileAppTile';
 

package/src/components/Navigation/Navigation.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Navigation } from './Navigation';
 

package/src/components/NavigatorTabs/NavigatorTabs.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { NavigatorTabs } from './NavigatorTabs';
 import tabsExample from './NavigatorTabs.example.json';
 import type { NavigatorTabsContent } from './NavigatorTabsContent';

package/src/components/OtherProducts/OtherProducts.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 import { defaultProps as GALLERY } from '../Gallery/Gallery.fixture';
 import { HEADLINE } from '../Headline/Headline.fixture';
 import { linkDocsContentExample } from '../LinkDocs/linkDocsContentExample';

package/src/components/PictureText/PictureText.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import type { Picture } from '../../model/Picture';
 import { PictureText } from './PictureText';

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

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

package/src/components/Placeholder/Placeholder.fixture.tsx

@@ -1,4 +1,4 @@
-import { context } from '../../setup-fixture';
+import { context } from '../../react/setup-fixture';
 
 import { Placeholder } from './Placeholder';
 

package/src/components/Placeholder/Placeholder.tsx

@@ -50,8 +50,12 @@ const renderShimmer = (size = 3) =>
     .map((_) => Math.floor(_))
     .map(renderShimmerItem);
 
-const renderShimmerItem = (width = 100, index: number) => (
-  <div key={String(index)} style={{ width: `${width}%` }} className="h-4 mt-2 bg-secondary-light" />
+const renderShimmerItem = (width: number, index: number) => (
+  <div
+    key={String(index)}
+    style={{ width: `${width || 100}%` }}
+    className="h-4 mt-2 bg-secondary-light"
+  />
 );
 
 const goldenSequence = (first: number, size: number): number[] =>