fix(home): service grid

.idea/workspace.xml

@@ -5,16 +5,12 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="2a96f817-9dc2-4f3c-893a-c4974c750774" name="Changes" comment="">
-      <change afterPath="$PROJECT_DIR$/src/shared/ui/icon/base.tsx" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/widgets/service-grid/data.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/shared/ui/icon/service-grid.tsx" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/service-grid/index.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/service-grid/styles.module.scss" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/widgets/service-grid/ui.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/shared/ui/icon/service-grid.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/icon/service-grid.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/shared/ui/icon/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/shared/ui/icon/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/home/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/styles.module.scss" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/widgets/service-grid/styles.module.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/service-grid/styles.module.scss" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/home/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/home/ui.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/widgets/service-grid/ui.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/service-grid/ui.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/widgets/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/widgets/index.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -22,7 +18,7 @@
     <option name="LAST_RESOLUTION" value="IGNORE" />
   </component>
   <component name="DarkyenusTimeTracker">
-    <option name="totalTimeSeconds" value="164065" />
+    <option name="totalTimeSeconds" value="169880" />
     <option name="gitIntegration" value="true" />
     <option name="naggedAbout" value="1" />
   </component>
@@ -66,6 +62,7 @@
     "nodejs_package_manager_path": "npm",
     "npm.Next.js: server-side.executor": "Run",
     "prettierjs.PrettierConfiguration.Package": "C:\\dev-personal\\ocenka-web\\node_modules\\prettier",
+    "settings.editor.selected.configurable": "terminal",
     "to.speed.mode.migration.done": "true",
     "ts.external.directory.path": "C:\\dev-personal\\ocenka-web\\node_modules\\typescript\\lib",
     "vue.rearranger.settings.migration": "true"
@@ -103,7 +100,8 @@
       <workItem from="1763636887488" duration="6811000" />
       <workItem from="1764586916122" duration="32000" />
       <workItem from="1764590282382" duration="1201000" />
-      <workItem from="1764591867512" duration="3620000" />
+      <workItem from="1764591867512" duration="4332000" />
+      <workItem from="1764657017067" duration="6387000" />
     </task>
     <servers />
   </component>

src/shared/ui/icon/ui.tsx

@@ -80,6 +80,7 @@ const Icons = Object.assign(
     GridRoute,
     GridWall,
     GridInsurance,
+    //
     GridCollision,
     GridDocumentWithPen,
     GridJustice,
@@ -88,6 +89,7 @@ const Icons = Object.assign(
     GridStoreBar,
     GridTransferAccount,
     GridBlueprint,
+    //
     GridAuto,
     GridCrane,
     GridHouseWithAttic,

src/widgets/service-grid/data.tsx

@@ -0,0 +1,157 @@
+import { Icons } from '@/shared/ui';
+import { ROUTES } from '@shared/const/route';
+
+const iconProps = { height: 100, width: 100, fill: '#23A455' };
+
+export const servicesData = {
+  expertise: [
+    {
+      id: 0,
+      title: 'Строительно-техническая экспертиза',
+      icon: <Icons.GridWall {...iconProps} />,
+      url: ROUTES.EXPERTIZA_STROIT,
+    },
+    {
+      id: 1,
+      title: 'Автотехническая экспертиза',
+      icon: <Icons.GridCar {...iconProps} />,
+      url: ROUTES.EXPERTIZA_AUTOTECH,
+    },
+    {
+      id: 2,
+      title: 'Кадастровая экспертиза',
+      icon: <Icons.GridMap {...iconProps} />,
+      url: ROUTES.EXPERTIZA_KADASTR,
+    },
+    {
+      id: 3,
+      title: 'Технико-криминалистическая экспертиза',
+      icon: <Icons.GridBook {...iconProps} />,
+      url: ROUTES.EXPERTIZA_TECH_CRIM,
+    },
+    {
+      id: 4,
+      title: 'Компьютерно-техническая экспертиза',
+      icon: <Icons.GridComputer {...iconProps} />,
+      url: ROUTES.EXPERTIZA_COPMPUTER,
+    },
+    {
+      id: 5,
+      title: 'Товароведческая экспертиза',
+      icon: <Icons.GridBox {...iconProps} />,
+      url: ROUTES.EXPERTIZA_TOVAR,
+    },
+    {
+      id: 6,
+      title: 'Трасологическая экспертиза',
+      icon: <Icons.GridRoute {...iconProps} />,
+      url: ROUTES.EXPERTIZA_TRASOLOGIA,
+    },
+    {
+      id: 7,
+      title: 'Бухгалтерская экспертиза',
+      icon: <Icons.GridDocument {...iconProps} />,
+      url: ROUTES.EXPERTIZA_BUHGALTER,
+    },
+  ],
+  ocenka: [
+    {
+      id: 0,
+      title: 'Оценка недвижимого имущества',
+      icon: <Icons.GridHouseWithAttic {...iconProps} />,
+      url: ROUTES.OCENKA_NEDVIGA,
+    },
+    {
+      id: 1,
+      title: 'Оценка движимого имущества',
+      icon: <Icons.GridAuto {...iconProps} />,
+      url: ROUTES.OCENKA_RYNOCHNAYA,
+    },
+    {
+      id: 2,
+      title: 'Оценка для наследства',
+      icon: <Icons.GridBlueprint {...iconProps} />,
+      url: ROUTES.OCENKA_NASLEDSTVO,
+    },
+    {
+      id: 3,
+      title: 'Оценка предприятия, бизнеса',
+      icon: <Icons.GridStore {...iconProps} />,
+      url: ROUTES.OCENKA_BUSINESS,
+    },
+    {
+      id: 4,
+      title: 'Оценка арендной платы',
+      icon: <Icons.GridOffice {...iconProps} />,
+      url: ROUTES.OCENKA_ARENDA,
+    },
+    {
+      id: 5,
+      title: 'Оценка для ипотеки',
+      icon: <Icons.GridMortgage {...iconProps} />,
+      url: ROUTES.OCENKA_IPOTEKA,
+    },
+    {
+      id: 6,
+      title: 'Оценка для нотариуса',
+      icon: <Icons.GridWrite {...iconProps} />,
+      url: ROUTES.OCENKA_NOTARIUS,
+    },
+    {
+      id: 7,
+      title: 'Оценка машин и оборудования',
+      icon: <Icons.GridCrane {...iconProps} />,
+      url: ROUTES.OCENKA_MASHINES,
+    },
+  ],
+  jurist: [
+    {
+      id: 0,
+      title: 'Представительство в суде',
+      icon: <Icons.GridPersonCombination {...iconProps} />,
+      url: ROUTES.JURIST_PREDSTAVITELSTVO,
+    },
+    {
+      id: 1,
+      title: 'Банкротство физических лиц',
+      icon: <Icons.GridTransferAccount {...iconProps} />,
+      url: ROUTES.JURIST_BANKROTSTVO,
+    },
+    {
+      id: 2,
+      title: 'Сопровождение сделок, составление договоров',
+      icon: <Icons.GridDocumentWithPen {...iconProps} />,
+      url: ROUTES.JURIST_SDELKI_DOGOVORA,
+    },
+    {
+      id: 3,
+      title: 'Споры с застройщиком',
+      icon: <Icons.GridJustice {...iconProps} />,
+      url: ROUTES.JURIST_ZEM_SPORY,
+    },
+    {
+      id: 4,
+      title: 'Споры со страховой компанией',
+      icon: <Icons.GridInsurance {...iconProps} />,
+      url: ROUTES.JURIST_STRAHOVKA,
+    },
+    {
+      id: 5,
+      title: 'Помощь должникам',
+      icon: <Icons.GridShield {...iconProps} />,
+      url: ROUTES.JURIST_DOLZHNIKAM,
+    },
+    {
+      id: 6,
+      title: 'Взыскание долгов с юридических лиц',
+      icon: <Icons.GridStore {...iconProps} />,
+      url: ROUTES.JURIST_DOLGI,
+    },
+    {
+      id: 7,
+      title: 'Споры по ДТП',
+      icon: <Icons.GridCollision {...iconProps} />,
+      url: ROUTES.JURIST_DTP,
+    },
+  ],
+};

src/widgets/service-grid/styles.module.scss

@@ -3,26 +3,26 @@
   position: relative;
   margin: 0 auto;
   max-width: rem(1540px);
-  padding: 40px 10px;
+  padding: rem(40px) rem(10px);
 
   @include iftablet {
-    padding: 40px 20px;
+    padding: rem(40px) rem(20px);
   }
   @include iflaptop {
-    padding: 40px 28px;
+    padding: rem(40px) rem(28px);
   }
   @include ifdesktop {
-    padding: 40px;
+    padding: rem(40px);
   }
 
   .Title {
     font-family: $font-roboto;
     font-weight: 500;
-    font-size: 32px;
+    font-size: rem(32px);
     line-height: 100%;
     color: $color-text;
     text-align: center;
-    margin-bottom: rem(40px);
+    margin-bottom: rem(20px);
   }
 
   .Switcher {
@@ -41,50 +41,78 @@
       flex: 1;
       display: flex;
       justify-content: center;
-      padding: 20px;
+
+      font-family: $font-roboto;
+      font-weight: 400;
+      font-size: rem(16px);
+      line-height: 100%;
+      padding: rem(20px);
       border-radius: rem(18px);
       color: $color-green;
       text-transform: uppercase;
+      cursor: pointer;
+      border: 1px solid transparent;
 
       &_active {
         background-color: $color-green;
         color: $color-white;
+        cursor: auto;
+      }
+      &:hover {
+        border: 1px solid $color-green;
       }
     }
   }
 
   .Grid {
     display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(2, 1fr);
     gap: rem(20px);
 
+    @include iflaptop{
+      grid-template-columns: repeat(4, 1fr);
+      gap: rem(20px);
+    }
+
     .Tile {
       display: flex;
       flex-direction: column;
-      justify-content: center;
+      justify-content: flex-start;
       align-items: center;
-      gap: rem(24px);
+      gap: rem(40px);
       border: 1px solid $color-green;
-      padding: rem(20px) rem(40px);
+      padding: rem(20px) rem(20px);
       border-radius: rem(20px);
       //box-shadow: 4px 0px 10px 0px rgba(0,146,131,0.5);
       cursor: pointer;
+      height: 100%;
 
       font-family: $font-roboto;
-      font-weight: 300;
+      font-weight: 400;
       font-size: rem(16px);
       line-height: 100%;
       color: $color-green;
       text-align: center;
+
+      @include iftablet{
+        padding: rem(20px) rem(20px);
+      }
+      @include iflaptop{
+        padding: rem(20px) rem(40px);
+        min-height: 220px;
+        font-size: rem(18px);
+      }
+      @include ifdesktop{
+      }
+
       &:hover {
         box-shadow: 4px 4px 10px 0px rgba(0,146,131,0.5);
       }
     }
 
-    .Icon {
+    svg {
-      & img {
+      width: 64px;
-        fill: $color-green;
+      height: 64px;
-      }
     }
   }
 }

src/widgets/service-grid/ui.tsx

@@ -1,31 +1,68 @@
+'use client';
+
 import s from './styles.module.scss';
-import { ROUTES } from '@shared/const/route';
 import clsx from 'clsx';
-import Image from 'next/image';
+import { useState } from 'react';
+import Link from 'next/link';
+import { servicesData } from './data';
+
+enum SwitcherOption {
+  EXPERTISE = 'expertise',
+  OCENKA = 'ocenka',
+  JURIST = 'jurist',
+}
 
 function ServiceGrid() {
+  const [switcher, setSwitcher] = useState<SwitcherOption>(
+    SwitcherOption.EXPERTISE,
+  );
+
+  const handleSwitch = (switcher: SwitcherOption) => () => {
+    setSwitcher(switcher);
+  };
+
   return (
     <section className={s.Service}>
       <h2 className={s.Title}>Выберите услугу</h2>
 
       <div className={s.Switcher}>
-        <div className={clsx(s.Button, s.Button_active)}>Экспертиза</div>
+        <div
-        <div className={s.Button}>Оценка</div>
+          className={clsx(
-        <div className={s.Button}>Юрист</div>
+            s.Button,
+            switcher === SwitcherOption.EXPERTISE && s.Button_active,
+          )}
+          onClick={handleSwitch(SwitcherOption.EXPERTISE)}
+        >
+          Экспертиза
+        </div>
+        <div
+          className={clsx(
+            s.Button,
+            switcher === SwitcherOption.OCENKA && s.Button_active,
+          )}
+          onClick={handleSwitch(SwitcherOption.OCENKA)}
+        >
+          Оценка
+        </div>
+        <div
+          className={clsx(
+            s.Button,
+            switcher === SwitcherOption.JURIST && s.Button_active,
+          )}
+          onClick={handleSwitch(SwitcherOption.JURIST)}
+        >
+          Юрист
+        </div>
       </div>
 
       <div className={s.Grid}>
-        {servicesData.expertise.map(({ id, title, icon, url }, i) => (
+        {servicesData[switcher].map(({ id, title, icon, url }, i) => (
-          <div key={id} className={s.Tile}>
+          <Link key={id} href={url}>
-            <Image
+            <div className={s.Tile}>
-              className={s.Icon}
+              {icon}
-              src={icon}
+              {title}
-              alt={title}
+            </div>
-              width={100}
+          </Link>
-              height={100}
-            />
-            {title}
-          </div>
         ))}
       </div>
     </section>
@@ -33,156 +70,3 @@ function ServiceGrid() {
 }
 
 export { ServiceGrid };
-
-const servicesData = {
-  expertise: [
-    {
-      id: 0,
-      title: 'Строительно-техническая экспертиза',
-      icon: '/svg/service-grid/expertise/wall.svg',
-      url: ROUTES.EXPERTIZA_STROIT,
-    },
-    {
-      id: 1,
-      title: 'Автотехническая экспертиза',
-      icon: '/svg/service-grid/expertise/car.svg',
-      url: ROUTES.EXPERTIZA_AUTOTECH,
-    },
-    {
-      id: 2,
-      title: 'Кадастровая экспертиза',
-      icon: '/svg/service-grid/expertise/map.svg',
-      url: ROUTES.EXPERTIZA_KADASTR,
-    },
-    {
-      id: 3,
-      title: 'Технико-криминалистическая экспертиза',
-      icon: '/svg/service-grid/expertise/book.svg',
-      url: ROUTES.EXPERTIZA_TECH_CRIM,
-    },
-    {
-      id: 4,
-      title: 'Компьютерно-техническая экспертиза',
-      icon: '/svg/service-grid/expertise/computer-monitor-and-mouse.svg',
-      url: ROUTES.EXPERTIZA_COPMPUTER,
-    },
-    {
-      id: 5,
-      title: 'Товароведческая экспертиза',
-      icon: '/svg/service-grid/expertise/box.svg',
-      url: ROUTES.EXPERTIZA_TOVAR,
-    },
-    {
-      id: 6,
-      title: 'Трасологическая экспертиза',
-      icon: '/svg/service-grid/expertise/route.svg',
-      url: ROUTES.EXPERTIZA_TRASOLOGIA,
-    },
-    {
-      id: 7,
-      title: 'Бухгалтерская экспертиза',
-      icon: '/svg/service-grid/expertise/document.svg',
-      url: ROUTES.EXPERTIZA_BUHGALTER,
-    },
-  ],
-  ocenka: [
-    {
-      id: 0,
-      title: 'Оценка недвижимого имущества',
-      icon: '/svg/service-grid/ocenka/',
-      url: ROUTES.OCENKA_NEDVIGA,
-    },
-    {
-      id: 1,
-      title: 'Оценка движимого имущества',
-      icon: '/svg/service-grid/ocenka/',
-      url: ROUTES.OCENKA_RYNOCHNAYA,
-    },
-    {
-      id: 2,
-      title: 'Оценка для наследства',
-      icon: '/svg/service-grid/ocenka/',
-      url: ROUTES.OCENKA_NASLEDSTVO,
-    },
-    {
-      id: 3,
-      title: 'Оценка предприятия, бизнеса',
-      icon: '/svg/service-grid/ocenka/',
-      url: ROUTES.OCENKA_BUSINESS,
-    },
-    {
-      id: 4,
-      title: 'Оценка арендной платы',
-      icon: '/svg/service-grid/ocenka/',
-      url: ROUTES.OCENKA_ARENDA,
-    },
-    {
-      id: 5,
-      title: 'Оценка для ипотеки',
-      icon: '/svg/service-grid/ocenka/',
-      url: ROUTES.OCENKA_IPOTEKA,
-    },
-    {
-      id: 6,
-      title: 'Оценка для нотариуса',
-      icon: '/svg/service-grid/ocenka/',
-      url: ROUTES.OCENKA_NOTARIUS,
-    },
-    {
-      id: 7,
-      title: 'Оценка машин и оборудования',
-      icon: '/svg/service-grid/ocenka/',
-      url: ROUTES.OCENKA_MASHINES,
-    },
-  ],
-  jurist: [
-    {
-      id: 0,
-      title: 'Представительство в суде',
-      icon: '/svg/service-grid/jurist/',
-      url: ROUTES.JURIST_PREDSTAVITELSTVO,
-    },
-    {
-      id: 1,
-      title: 'Банкротство физических лиц',
-      icon: '/svg/service-grid/jurist/',
-      url: ROUTES.JURIST_BANKROTSTVO,
-    },
-    {
-      id: 2,
-      title: 'Сопровождение сделок, составление договоров',
-      icon: '/svg/service-grid/jurist/',
-      url: ROUTES.JURIST_SDELKI_DOGOVORA,
-    },
-    {
-      id: 3,
-      title: 'Споры с застройщиком',
-      icon: '/svg/service-grid/jurist/',
-      url: ROUTES.JURIST_ZEM_SPORY,
-    },
-    {
-      id: 4,
-      title: 'Споры со страховой компанией',
-      icon: '/svg/service-grid/jurist/',
-      url: ROUTES.JURIST_STRAHOVKA,
-    },
-    {
-      id: 5,
-      title: 'Помощь должникам',
-      icon: '/svg/service-grid/jurist/',
-      url: ROUTES.JURIST_DOLZHNIKAM,
-    },
-    {
-      id: 6,
-      title: 'Взыскание долгов с юридических лиц',
-      icon: '/svg/service-grid/jurist/',
-      url: ROUTES.JURIST_DOLGI,
-    },
-    {
-      id: 7,
-      title: 'Споры по ДТП',
-      icon: '/svg/service-grid/jurist/',
-      url: ROUTES.JURIST_DTP,
-    },
-  ],
-};