Merge branch 'master' of http://192.168.1.163:3000/mikhail_lanskikh/graff.estate-nextjs-updated

src/components/pages/PrimePageMobile/CategoryItem.tsx

@@ -2,6 +2,7 @@ import { categories } from '@/consts/categories';
 import { CheckboxGroup } from '@/components/pages/PrimePageMobile/CheckboxGroup';
 import CartegoryHeader from './CartegoryHeader';
 import CategoryCounter from './CategoryCounter';
+import ImageSwitcher from './ImageSwitcher';
 
 export function CategoryItem({
   titleCategory,
@@ -16,11 +17,13 @@ export function CategoryItem({
         titleCategory === 'Рекламные материалы' ||
         titleCategory === 'Детальная проработка окружения' ? (
           <CategoryCounter titleCategory={titleCategory} />
+        ) : titleCategory === 'Дизайн интерьеров' ? (
+          <ImageSwitcher varaints={categories[titleCategory]} />
         ) : (
           <CheckboxGroup
             titleCategory={titleCategory}
             variants={categories[titleCategory]}
-          ></CheckboxGroup>
+          />
         )}
       </div>
     </div>

src/components/pages/PrimePageMobile/CheckboxGroup.tsx

@@ -10,13 +10,10 @@ export function CheckboxGroup<
   V extends OptionTitles[T]
 >({ titleCategory, variants }: { titleCategory: T; variants: V }) {
   return (
-    <div
-      className={` ${
-        titleCategory === 'Сезонность' ? 'grid grid-cols-2 grid-rows-2' : 'flex'
-      }  gap-1 overflow-x-scroll whitespace-nowrap scrollbar-hide -m-3 p-3 snap-x-mandatory`}
-    >
+    <div className='flex gap-1 overflow-x-scroll whitespace-nowrap scrollbar-hide -m-3 p-3 snap-x-mandatory'>
       {variants.map((variantItem, index) => {
         const imageData = imagesCategories[titleCategory][index];
+
         return (
           <CheckboxItem
             key={index}

src/components/pages/PrimePageMobile/ImageSwitcher.tsx

@@ -0,0 +1,50 @@
+import {
+  $configurationStore,
+  setDesign,
+} from '@/stores/configurator-store/configurationStore';
+import { Design } from '@/types/IConfigurator';
+import { useUnit } from 'effector-react';
+import { imagesCategories } from '@/consts/categories';
+import { useState } from 'react';
+
+export default function ImageSwitcher({ varaints }: { varaints: Design[] }) {
+  const configuration = useUnit($configurationStore);
+  const designOption = configuration['Дизайн интерьеров'].opts.split(
+    '.'
+  )[0] as Design;
+
+  const index = varaints.findIndex(
+    (item) => item.split('.')[0] === designOption
+  );
+
+  const backgroundImage =
+    index !== -1 && imagesCategories['Дизайн интерьеров'][index]
+      ? imagesCategories['Дизайн интерьеров'][index].childrenClassName
+      : '';
+
+  return (
+    <div className='flex flex-col gap-1'>
+      <div
+        className={`w-full h-[354px] bg-[#37393B99] rounded-2xl ${backgroundImage}`}
+      ></div>
+      <div className='flex gap-1 overflow-x-scroll whitespace-nowrap scrollbar-hide -m-3 p-3 snap-x-mandatory'>
+        {varaints.map((item, index) => {
+          const itemLabel = item.split('.')[0];
+          return (
+            <div
+              key={index}
+              className={`btns px-3 py-2.25 ${
+                designOption === item.split('.')[0]
+                  ? 'bg-[#fff] text-[#0F1011]'
+                  : 'bg-[#37393B99]'
+              } rounded-xl`}
+              onClick={() => setDesign(item)}
+            >
+              {itemLabel}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

src/consts/categories.ts

@@ -100,27 +100,27 @@ export const imagesCategories: ImagesCategories = {
   'Дизайн интерьеров': [
     {
       className: '',
-      source: ['designInterior1.jpg'],
-      childrenClassName: 'w-14 h-14 rounded-full top-2.5',
+      source: [],
+      childrenClassName:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/mobile/designInterior1.jpg)]',
     },
     {
       className: '',
-      source: ['designInterior2.jpg'],
-      childrenClassName: 'w-14 h-14 rounded-full top-2.5',
+      source: [],
+      childrenClassName:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/mobile/designInterior2.jpg)]',
     },
     {
       className: '',
-      source: ['designInterior3.jpg'],
-      childrenClassName: 'w-14 h-14 rounded-full top-2.5',
+      source: [],
+      childrenClassName:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/mobile/designInterior3.jpg)]',
     },
     {
       className: '',
-      source: [
-        'designInterior4.jpg',
-        'designInterior4.jpg',
-        'designInterior4.jpg',
-      ],
-      childrenClassName: 'w-14 h-14 rounded-full top-2.5',
+      source: [],
+      childrenClassName:
+        'bg-no-repeat bg-cover bg-center bg-[url(/img/pages/prime/mobile/designInterior4.jpg)]',
     },
   ],
   'Рекламные материалы': [

src/stores/configurator-store/configurationStore.ts

@@ -57,7 +57,7 @@ const $details = createStore<Details>(250)
     return index > 0 ? detailsValues[index - 1] : state;
   });
 
-const $design = createStore<OptionObjectEffector<Design>>({
+export const $design = createStore<OptionObjectEffector<Design>>({
   opts: 'WhiteBox.Квартиры без интерьеров',
 }).on(setDesign, (state, payload) => ({ ...state, opts: payload }));
 

src/ui/CheckboxItem.tsx

@@ -46,9 +46,7 @@ function CheckboxItem<T extends keyof OptionTitles, V extends OptionTitles[T]>({
   return (
     <label
       className={`relative p-3 bg-[#37393B99] rounded-2xl flex-shrink-0 flex flex-col items-start justify-between snap-always ${className} ${
-        titleCategory === 'Сезонность'
-          ? 'h-27.5'
-          : titleCategory === 'Оборудование'
+        titleCategory === 'Оборудование'
           ? 'w-[168px] h-[154px] '
           : 'w-[160px] h-[154px] '
       }`}
@@ -64,6 +62,7 @@ function CheckboxItem<T extends keyof OptionTitles, V extends OptionTitles[T]>({
   checked:bg-gradient checked:shadow-[0px_0px_2px_0px_#7874F3] 
   checked:before:content-[""] checked:before:absolute checked:before:w-full checked:before:h-full 
   checked:before:bg-[url(/icons/check.svg)] before:bg-[length:14px] checked:before:bg-center checked:before:bg-no-repeat
+  checked:scale-110 transition-transform
   ${
     titleCategory === 'Сезонность'
       ? 'pointer-events-none bg-white outline-none border-transparent'