@redneckz/wildless-cms-uni-blocks 0.3.55 → 0.3.57

package/mobile/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -0,0 +1,27 @@
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { GroupBlockDef } from './BlocksTypeProps';
+import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
+import { style2className } from '../../utils/style2className';
+
+type EmbeddableBlocksProps = {
+  groupBlocks?: GroupBlockDef[];
+  context: ContentPageContext;
+  className?: string;
+};
+
+export const renderBlock =
+  ({ context, className }: EmbeddableBlocksProps) =>
+  (block: GroupBlockDef, i: number) => {
+    const type = block?.blockType;
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+      return null;
+    }
+    const classNameBlock = style2className(block?.style);
+    const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+    return (
+      <div className={className} key={`block_${i}`}>
+        <EmbeddedBlock context={context} {...block} className={classNameBlock} />
+      </div>
+    );
+  };

package/mobile/src/components/OtherProducts/OtherProductsContent.ts

@@ -14,7 +14,10 @@ export interface BlockItemCommonProps {
    * @title Отображать в раскрытом виде
    */
   isExpanded?: boolean;
-  /** @title Блоки */
+  /**
+   * @title Блоки
+   * @maxItems 10
+   */
   blocks?: BlockDef[];
   columns?: ColumnsCount;
 }
@@ -27,7 +30,6 @@ export interface OtherProductsContent {
   title?: string;
   /**
    * @title Список
-   * @maxItems 10
    */
   blockItems?: BlockItemCommonProps[];
   colorPalette?: ColorPalette;

package/mobile/src/components/ProductGalleryGreen/ProductGalleryGreen.tsx

@@ -28,7 +28,7 @@ const productSlideStyleMap: Record<BlockVersion, string> = {
 };
 
 export const ProductGalleryGreen = JSX<ProductGalleryProps>(
-  ({ className = '', context, slides = [], version = 'primary', duration = 0, anchor = null }) => {
+  ({ className = '', context, slides = [], version = 'primary', anchor = null }) => {
     const galleryNav = slides.map((s) => s.nav);
     const galleryBlocks = slides.map((s) => s.productBlock);
     const [activeSlideIndex, setActiveSlideIndex] = context.useState(0);
@@ -55,7 +55,6 @@ export const ProductGalleryGreen = JSX<ProductGalleryProps>(
               activeSlideIndex,
               onClick: () => setActiveSlideIndex(i),
               version,
-              duration,
             }),
           )}
         </div>
@@ -76,7 +75,7 @@ function renderProductBlock(block: ProductBlockInnerContent, i: number, context)
     >
       <div className="flex grow">
         <ProductBlockInner
-          className={`pl-[50px] pr-2 z-[1] ${additionalClass}`}
+          className={`pl-[50px] z-[1] ${additionalClass}`}
           context={context}
           textBlockClassName="mb-[154px]"
           {...block}
@@ -86,12 +85,12 @@ function renderProductBlock(block: ProductBlockInnerContent, i: number, context)
   );
 }
 
-function renderNavButton({ slide, i, activeSlideIndex, onClick, version, duration }) {
+function renderNavButton({ slide, i, activeSlideIndex, onClick, version }) {
   const isActiveBtn = i === activeSlideIndex;
 
   const btnClassName = isActiveBtn
-    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] max-w-[354px] p-0 border-none'
-    : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300
+    ? 'bg-white shadow-dark-blue/42 h-[102px] w-[354px] min-w-[354px] p-0 border-none'
+    : `min-w-[277px] px-0 pt-4 pb-[23px] hover:py-[26px] hover:py-[26px] ease-in duration-300 bg-white/10
       ${productSlideStyleMap[version]}`;
   const btnTitleClassName = isActiveBtn
     ? 'text-primary-text text-title-2xs'
@@ -100,8 +99,7 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version, duratio
     ? 'text-secondary-text text-m-title-xs mt-2.5'
     : `text-m-md mt-1.5 ${productBlockStyleMap[version].text}`;
 
-  const additionalBorder = version === 'secondary' ? 'border-white/50' : '';
-  const progressBarClassName = isActiveBtn ? 'animate-slide' : '';
+  const additionalBorder = version === 'secondary' ? 'border-white/50' : 'border-black/50';
 
   return (
     <button
@@ -109,18 +107,14 @@ function renderNavButton({ slide, i, activeSlideIndex, onClick, version, duratio
       key={String(i)}
       onClick={onClick}
       aria-label={slide?.title}
-      className={`box-border font-sans group relative overflow-hidden border-[1px] cursor-pointer text-left mx-1 grow basis-0 backdrop-blur-sm
-      ${btnClassName} ${additionalBorder}
+      className={`box-border font-sans relative overflow-hidden border-[1px] border-white/50 cursor-pointer text-left mx-1 grow basis-0
+        ${btnClassName} ${additionalBorder}
       `}
     >
       <div className="border-0 px-6">
         <div className={`font-medium ${btnTitleClassName}`}>{slide?.title}</div>
         <div className={`text-secondary-text ${btnDescClassName}`}>{slide.description}</div>
       </div>
-      <div
-        className={`absolute bottom-0 left-0 w-full h-[3px] bg-primary-main -translate-x-full ${progressBarClassName}`}
-        style={{ animationDuration: `${duration}s`, animationFillMode: 'forwards' }}
-      ></div>
     </button>
   );
 }

package/mobile/src/types.ts

@@ -44,10 +44,16 @@ export interface ContentPageMeta {
   jsonLd?: string;
 }
 
+export interface CustomPageTemplate {
+  content?: Record<string, any>;
+  type?: string;
+}
+
 export interface ContentPageDef extends ContentPageMeta {
   style?: string[];
-  blocks?: BlockDef[]; //! for compatibility
+  blocks?: BlockDef[];
   slots?: SlotsMap;
+  customPageTmpl?: CustomPageTemplate;
   likeControl?: boolean;
   colorPalette?: ColorPalette;
 }

package/mobile/src/utils/style2className.ts

@@ -0,0 +1,3 @@
+export function style2className(style: string[] | undefined | null): string {
+  return style ? style.filter(Boolean).join(' ') : '';
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redneckz/wildless-cms-uni-blocks",
-  "version": "0.3.55",
+  "version": "0.3.57",
   "private": false,
   "license": "MIT",
   "author": "ЦК",

package/src/components/BlockContent.ts

@@ -5,6 +5,7 @@ import type { ExchangeRateTileContent } from './ExchangeRateTile/ExchangeRateTil
 import type { FooterContent } from './Footer/FooterContent';
 import type { GalleryContent } from './Gallery/GalleryContent';
 import type { GracePeriodContent } from './GracePeriod/GracePeriodContent';
+import type { GroupBlockContent } from './GroupBlock/GroupBlockContent';
 import type { HeaderContent } from './Header/HeaderContent';
 import type { LinkDocsContent } from './LinkDocs/LinkDocsContent';
 import type { LinkListContent } from './LinkList/LinkListContent';
@@ -48,4 +49,5 @@ export type BlockContent =
   | TextBlockContent
   | TileContent
   | NavigationContent
-  | LinkListContent;
+  | LinkListContent
+  | GroupBlockContent;

package/src/components/Blocks.ts

@@ -27,6 +27,7 @@ import { StepsBlock } from './StepsBlock/StepsBlock';
 import { TariffsTable } from './TariffsTable/TariffsTable';
 import { TextBlock } from './TextBlock/TextBlock';
 import { Tile } from './Tile/Tile';
+import { GroupBlock } from './GroupBlock/GroupBlock';
 
 export const Blocks = {
   Accordion,
@@ -58,4 +59,5 @@ export const Blocks = {
   Tile,
   Navigation,
   Placeholder,
+  GroupBlock,
 };

package/src/components/ContentPage/ContentPage.tsx

@@ -2,6 +2,7 @@ import { JSX, PropsWithChildren } from '@redneckz/uni-jsx';
 import type { BlockDef, ContentPageDef, UniBlockProps } from '../../types';
 import { changeHashOnScroll } from '../../utils/changeHashOnScroll';
 import { isSSR } from '../../utils/isSSR';
+import { style2className } from '../../utils/style2className';
 import type { BlockContent } from '../BlockContent';
 import { LikeControl } from '../LikeControl/LikeControl';
 import { Placeholder } from '../Placeholder/Placeholder';
@@ -128,7 +129,3 @@ function renderBlock(
     `block-${i}`,
   );
 }
-
-function style2className(style: string[] | undefined | null): string {
-  return style ? style.join(' ') : '';
-}

package/src/components/ContentPage/CustomContentPage.tsx

@@ -0,0 +1,82 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { ContentPageDef, CustomPageTemplate, UniBlockProps } from '../../types';
+import { style2className } from '../../utils/style2className';
+import { ContentPageContext } from './ContentPageContext';
+
+interface PageDecoratorProps<VNode> {
+  pageClassName: string;
+  pageTemplate: CustomPageTemplate;
+  render: (props: { pageClassName: string; pageTemplate: CustomPageTemplate }) => VNode;
+}
+
+export type PageDecorator<VNode = any> = (
+  props: PageDecoratorProps<VNode>,
+  index?: number | string,
+) => any;
+
+export interface PageTemplate {
+  name: string;
+  template: any;
+}
+
+export type PageTemplatesRegistry = Record<string, PageTemplate>;
+
+export interface CustomContentPageProps extends UniBlockProps {
+  pageTemplatesRegistry: PageTemplatesRegistry;
+  data: ContentPageDef;
+  pageDecorator?: PageDecorator;
+}
+
+export interface RenderPageFunc {
+  pageTemplate: CustomPageTemplate;
+  pageClassName: string;
+  pageDecorator: PageDecorator;
+  pageTemplatesRegistry: PageTemplatesRegistry;
+  context: ContentPageContext;
+}
+
+const defaultPageDecorator: PageDecorator = ({ pageClassName, pageTemplate, render }) =>
+  render({ pageClassName, pageTemplate });
+
+export const CustomContentPage = JSX<CustomContentPageProps>(
+  ({
+    className = '',
+    context,
+    pageTemplatesRegistry,
+    data: { style: pageStyle, customPageTmpl: pageTemplate },
+    pageDecorator = defaultPageDecorator,
+  }) => {
+    return pageTemplate
+      ? renderPage({
+          pageTemplate,
+          pageClassName: `${style2className(pageStyle)} ${className}`,
+          pageDecorator,
+          pageTemplatesRegistry,
+          context,
+        })
+      : null;
+  },
+);
+
+function renderPage({
+  pageTemplate,
+  pageClassName,
+  pageDecorator,
+  pageTemplatesRegistry,
+  context,
+}: RenderPageFunc) {
+  const { type } = pageTemplate;
+  if (!(type && type in pageTemplatesRegistry) || !pageTemplatesRegistry[type].template) {
+    throw new Error(`No page template with "${type}" is registered`);
+  }
+
+  const { template: PageComponent } = pageTemplatesRegistry[type];
+  return pageDecorator({
+    pageClassName,
+    pageTemplate,
+    render: (props) => {
+      const { content } = props.pageTemplate;
+      return <PageComponent className={props.pageClassName} context={context} {...content} />;
+    },
+  });
+}

package/src/components/GroupBlock/BlocksTypeProps.ts

@@ -0,0 +1,40 @@
+import type { ProductBlockContent } from '../../components/ProductBlock/ProductBlockContent';
+import type { ProductTileContent } from '../../components/ProductTile/ProductTileContent';
+import { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+
+export interface ActiveHandler {
+  context: ContentPageContext;
+  blocks?: GroupBlockDef[];
+  initialState?: boolean;
+}
+
+export interface GroupBlockCommonProps {
+  /** @title Стиль */
+  style?: string[];
+  /** @title Теги */
+  tags?: string[];
+}
+
+/**
+ * @title Продуктовый блок
+ * @default {"blockType": "ProductBlock"}
+ */
+export type ProductBlockDef = ProductBlockContent &
+  GroupBlockCommonProps & { blockType: 'ProductBlock' };
+
+/**
+ * @title Продуктовая плитка
+ * @default {"blockType": "ProductTile"}
+ */
+export type ProductTileDef = ProductTileContent &
+  GroupBlockCommonProps & { blockType: 'ProductTile' };
+
+/**
+ * @title Выберите блок
+ */
+export type EmptyOption = null;
+
+/**
+ * @title Содержимое блока
+ */
+export type GroupBlockDef = EmptyOption | ProductBlockDef | ProductTileDef;

package/src/components/GroupBlock/EmbeddableGroupBlocks.tsx

@@ -0,0 +1,7 @@
+import { ProductBlock } from '../ProductBlock/ProductBlock';
+import { ProductTile } from '../ProductTile/ProductTile';
+
+export const EmbeddableGroupBlocks = {
+  ProductBlock,
+  ProductTile,
+};

package/src/components/GroupBlock/GroupBlock.example.json

@@ -0,0 +1,27 @@
+{
+  "tabs": [
+    { "title": "Еще программы", "index": 0 },
+    { "title": "Страхование жизни", "index": 1, "tag": "tag1" },
+    { "title": "Страхование здоровья", "index": 2, "tag": "tag2" }
+  ],
+  "blocks": [
+    {
+      "blockType": "ProductBlock",
+      "title": "Продуктовый блок",
+      "description": "Описание текстового блока",
+      "tags":["tag2"]
+    },
+    {
+      "blockType": "ProductTile",
+      "title": "Продуктовая плитка",
+      "description": "Описание текстового блока",
+      "tags":["tag1"]
+    },
+    {
+      "blockType": "ProductBlock",
+      "title": "Продуктовый блок",
+      "description": "Описание текстового блока",
+      "tags":["tag2"]
+    }
+  ]
+}

package/src/components/GroupBlock/GroupBlock.fixture.tsx

@@ -0,0 +1,51 @@
+import { context } from '../../setup-fixture';
+import { PRODUCT_TILE } from '../ProductTile/ProductTile.fixture';
+import { PRODUCT_BLOCK } from '../ProductBlock/ProductBlock.fixture';
+import { GroupBlock } from './GroupBlock';
+import groupBlockExample from './GroupBlock.example.json';
+import type { ProductTileDef, ProductBlockDef } from './BlocksTypeProps';
+
+const PRODUCT_TILE_GROUP_BLOCK: ProductTileDef = {
+  blockType: 'ProductTile',
+  tags: ['tag2'],
+  style: ['col-span-6'],
+  ...PRODUCT_TILE,
+};
+
+const PRODUCT_TILE_GROUP_BLOCK2: ProductTileDef = {
+  blockType: 'ProductTile',
+  tags: ['tag2'],
+  style: ['col-span-6'],
+  ...PRODUCT_TILE,
+};
+
+const PRODUCT_BLOCK_GROUP_BLOCK: ProductBlockDef = {
+  blockType: 'ProductBlock',
+  tags: ['tag1'],
+  style: ['col-span-12'],
+  ...PRODUCT_BLOCK,
+};
+
+const PRODUCT_BLOCK_GROUP_BLOCK2: ProductBlockDef = {
+  blockType: 'ProductBlock',
+  style: ['col-span-12'],
+  ...PRODUCT_BLOCK,
+};
+
+export default {
+  default: (
+    <div className="container grid grid-cols-12">
+      <GroupBlock
+        context={context}
+        className="col-span-12"
+        tabs={groupBlockExample.tabs}
+        groupBlocks={[
+          PRODUCT_TILE_GROUP_BLOCK,
+          PRODUCT_TILE_GROUP_BLOCK2,
+          PRODUCT_BLOCK_GROUP_BLOCK,
+          PRODUCT_BLOCK_GROUP_BLOCK2,
+        ]}
+      />
+    </div>
+  ),
+};

package/src/components/GroupBlock/GroupBlock.tsx

@@ -0,0 +1,43 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { UniBlockProps } from '../../types';
+import type { GroupBlockContent, GroupBlockTab } from './GroupBlockContent';
+import { GroupBlockTabs } from './GroupBlockTabs';
+import { GroupBlocksItem } from './GroupBlocksItem';
+import { filterBlocksByTag } from './filterBlocksByTag';
+
+export interface TabsItemProps extends GroupBlockTab {
+  count?: number;
+}
+
+export interface GroupBlockProps extends GroupBlockContent, UniBlockProps {
+  tabs?: TabsItemProps[];
+}
+
+export const GroupBlock = JSX<GroupBlockProps>(
+  ({ className = '', tabs, context, anchor = null, groupBlocks = [] }) => {
+    const [currentTag, setCurrentTag] = context.useState(tabs?.[0]?.tag);
+
+    const filteredBlocks = filterBlocksByTag(groupBlocks, currentTag);
+
+    const tabsNewMap = tabs?.map((tab) => {
+      const count = tab.tag
+        ? groupBlocks.filter((block) => block?.tags?.includes(`${tab.tag}`)).length
+        : groupBlocks.length;
+
+      return { ...tab, count };
+    });
+
+    return (
+      <section id={anchor} className={`box-border gap-1 h-12 ${className}`}>
+        {tabsNewMap?.length ? (
+          <GroupBlockTabs currentTag={currentTag} onTabClick={setCurrentTag} tabs={tabsNewMap} />
+        ) : null}
+        {groupBlocks.length ? (
+          <div className="list-none">
+            <GroupBlocksItem context={context} groupBlocks={filteredBlocks} />
+          </div>
+        ) : null}
+      </section>
+    );
+  },
+);

package/src/components/GroupBlock/GroupBlockContent.ts

@@ -0,0 +1,23 @@
+import type { GroupBlockDef } from './BlocksTypeProps';
+
+/**
+ *  @title Таб
+ */
+export interface GroupBlockTab {
+  /** @title Название */
+  title?: string;
+  /** @title Tег */
+  tag?: string;
+}
+
+/**
+ * @title Блок-группировки
+ */
+export interface GroupBlockContent {
+  /** @title Блоки */
+  groupBlocks?: GroupBlockDef[];
+  /** @title Табы */
+  tabs?: GroupBlockTab[];
+  /** @title Показывать счетчик блоков во вкладках */
+  isShowCounter?: boolean;
+}

package/src/components/GroupBlock/GroupBlockTabs.tsx

@@ -0,0 +1,54 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { TabsItemProps } from './GroupBlock';
+
+export type TabClickHandler = (tag) => void;
+
+export interface GroupBlockTabsProps {
+  onTabClick: TabClickHandler;
+  currentTag?: string;
+  className?: string;
+  tabs?: TabsItemProps[];
+  isShowCounter?: boolean;
+}
+
+export const GroupBlockTabs = JSX<GroupBlockTabsProps>((props) => {
+  const { tabs, currentTag, onTabClick, className = '', isShowCounter = true } = props;
+
+  return (
+    <div className={`mb-2 box-border flex gap-x-1 h-12 ${className}`} role="tablist">
+      {tabs?.map(renderTab(onTabClick, isShowCounter, currentTag))}
+    </div>
+  );
+});
+
+const badgeStyle = 'w-[22px] h-[22px] rounded-full text-m-sm';
+
+const renderTab =
+  (onTabClick: TabClickHandler, isShowCounter: boolean, currentTag?: string) =>
+  (tab: TabsItemProps, i: number) => {
+    const isActive = currentTag === tab.tag;
+    const tabBg = isActive ? 'bg-primary-main' : 'group bg-white';
+    const tabText = isActive ? 'text-white' : 'text-secondary-text group-hover:text-primary-main';
+    const counterBlockStyle = `${badgeStyle} 
+      ${isActive ? 'bg-white/30 text-white' : 'bg-secondary-text/10 text-secondary-text'}`;
+
+    return (
+      <div
+        key={String(i)}
+        className={`flex h-full w-full flex-1 cursor-pointer mr-2 last:mr-0 box-content ${tabBg}`}
+        role="tab"
+        onClick={() => onTabClick(tab.tag)}
+        aria-selected={String(isActive)}
+        tag={tab?.tag}
+      >
+        <div className="flex flex-1 items-center justify-center">
+          {tab?.title ? <h3 className={`mr-8 ${tabText}`}>{tab?.title}</h3> : null}
+          {isShowCounter ? (
+            <div className={`flex items-center justify-center ${counterBlockStyle}`}>
+              <span>{tab.count}</span>
+            </div>
+          ) : null}
+        </div>
+      </div>
+    );
+  };

package/src/components/GroupBlock/GroupBlocksItem.tsx

@@ -0,0 +1,30 @@
+import { JSX } from '@redneckz/uni-jsx';
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { UniBlockProps } from '../../types';
+import { style2className } from '../../utils/style2className';
+import type { GroupBlockDef } from './BlocksTypeProps';
+import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
+import { GroupBlockContent } from './GroupBlockContent';
+
+export interface GroupBlocksProps extends GroupBlockContent, UniBlockProps {}
+
+export const GroupBlocksItem = JSX<GroupBlocksProps>(({ groupBlocks, context }) => {
+  return (
+    <div className={'grid grid-cols-12 gap-2 box-border'}>
+      {groupBlocks?.length ? groupBlocks.map(renderBlock(context)) : null}
+    </div>
+  );
+});
+
+export const renderBlock = (context: ContentPageContext) => (block: GroupBlockDef, i: number) => {
+  const type = block?.blockType;
+  if (!type || !(type in EmbeddableGroupBlocks)) {
+    return null;
+  }
+  const classNameBlock = style2className(block?.style);
+  const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+  return (
+    <EmbeddedBlock key={`block_${i}`} context={context} {...block} className={classNameBlock} />
+  );
+};

package/src/components/GroupBlock/filterBlocksByTag.ts

@@ -0,0 +1,5 @@
+import { GroupBlockDef } from './BlocksTypeProps';
+
+export const filterBlocksByTag = (blocks: GroupBlockDef[], tag?: string) => {
+  return tag ? blocks.filter((block) => block?.tags?.includes(tag)) : blocks;
+};

package/src/components/GroupBlock/renderBlocksTypes.tsx

@@ -0,0 +1,27 @@
+import type { JSXBlock } from '../../components/ContentPage/ContentPage';
+import type { ContentPageContext } from '../../components/ContentPage/ContentPageContext';
+import type { GroupBlockDef } from './BlocksTypeProps';
+import { EmbeddableGroupBlocks } from './EmbeddableGroupBlocks';
+import { style2className } from '../../utils/style2className';
+
+type EmbeddableBlocksProps = {
+  groupBlocks?: GroupBlockDef[];
+  context: ContentPageContext;
+  className?: string;
+};
+
+export const renderBlock =
+  ({ context, className }: EmbeddableBlocksProps) =>
+  (block: GroupBlockDef, i: number) => {
+    const type = block?.blockType;
+    if (!type || !(type in EmbeddableGroupBlocks)) {
+      return null;
+    }
+    const classNameBlock = style2className(block?.style);
+    const EmbeddedBlock: JSXBlock = EmbeddableGroupBlocks[type];
+    return (
+      <div className={className} key={`block_${i}`}>
+        <EmbeddedBlock context={context} {...block} className={classNameBlock} />
+      </div>
+    );
+  };

package/src/components/OtherProducts/OtherProductsContent.ts

@@ -14,7 +14,10 @@ export interface BlockItemCommonProps {
    * @title Отображать в раскрытом виде
    */
   isExpanded?: boolean;
-  /** @title Блоки */
+  /**
+   * @title Блоки
+   * @maxItems 10
+   */
   blocks?: BlockDef[];
   columns?: ColumnsCount;
 }
@@ -27,7 +30,6 @@ export interface OtherProductsContent {
   title?: string;
   /**
    * @title Список
-   * @maxItems 10
    */
   blockItems?: BlockItemCommonProps[];
   colorPalette?: ColorPalette;

package/src/components/ProductBlock/ProductBlockInner.tsx

@@ -60,7 +60,7 @@ export const ProductBlockInner = JSX<ProductBlockInnerProps>(
             ) : null}
           </BaseTile>
         </div>
-        {image?.src && <Img className="mt-auto" image={image} />}
+        {image?.src && <Img className="mt-[-50px]" image={image} />}
       </div>
     );
   },