From de017bdfef970e19334a87d8def2b8570ba4341d Mon Sep 17 00:00:00 2001 From: RedrockJS Date: Tue, 2 Dec 2025 11:28:27 +0300 Subject: [PATCH] fix(home): service grid --- .idea/workspace.xml | 18 +- src/shared/ui/icon/service-grid.tsx | 259 +++++++------------- src/shared/ui/icon/ui.tsx | 2 + src/widgets/service-grid/data.tsx | 157 ++++++++++++ src/widgets/service-grid/styles.module.scss | 60 +++-- src/widgets/service-grid/ui.tsx | 222 ++++------------- 6 files changed, 350 insertions(+), 368 deletions(-) create mode 100644 src/widgets/service-grid/data.tsx diff --git a/.idea/workspace.xml b/.idea/workspace.xml index e5e1278..dded387 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -5,16 +5,12 @@ - - - - - + + - - - + + - @@ -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 @@ - + + diff --git a/src/shared/ui/icon/service-grid.tsx b/src/shared/ui/icon/service-grid.tsx index 22f2449..14b6bdd 100644 --- a/src/shared/ui/icon/service-grid.tsx +++ b/src/shared/ui/icon/service-grid.tsx @@ -5,11 +5,11 @@ type SVGIcon = SVGProps; const GridBook = (props: SVGProps) => ( @@ -29,12 +29,11 @@ const GridBook = (props: SVGProps) => ( const GridBox = (props: SVGProps) => ( @@ -85,18 +84,17 @@ const GridBox = (props: SVGProps) => ( const GridCar = (props: SVGProps) => ( @@ -105,13 +103,11 @@ const GridCar = (props: SVGProps) => ( const GridComputer = (props: SVGProps) => ( @@ -139,34 +135,26 @@ const GridComputer = (props: SVGProps) => ( ); const GridDocument = (props: SVGProps) => ( - + ); const GridMap = (props: SVGProps) => ( @@ -353,12 +331,11 @@ const GridRoute = (props: SVGProps) => ( const GridWall = (props: SVGProps) => ( @@ -378,14 +355,12 @@ const GridWall = (props: SVGProps) => ( const GridInsurance = (props: SVGProps) => ( ) => ( const GridDocumentWithPen = (props: SVGProps) => ( - - - + + + + + - ); const GridPersonCombination = (props: SVGProps) => ( @@ -633,13 +564,11 @@ const GridShield = (props: SVGProps) => ( const GridStoreBar = (props: SVGProps) => ( @@ -684,13 +613,11 @@ const GridStoreBar = (props: SVGProps) => ( const GridTransferAccount = (props: SVGProps) => ( @@ -737,12 +664,11 @@ const GridTransferAccount = (props: SVGProps) => ( const GridBlueprint = (props: SVGProps) => ( @@ -795,16 +721,16 @@ const GridBlueprint = (props: SVGProps) => ( const GridAuto = (props: SVGProps) => ( @@ -812,17 +738,16 @@ const GridAuto = (props: SVGProps) => ( ); const GridCrane = (props: SVGProps) => ( - + ); const GridHouseWithAttic = (props: SVGProps) => ( - + ); @@ -830,12 +755,11 @@ const GridHouseWithAttic = (props: SVGProps) => ( const GridMortgage = (props: SVGProps) => ( @@ -894,12 +818,11 @@ const GridMortgage = (props: SVGProps) => ( const GridOffice = (props: SVGProps) => ( @@ -970,10 +893,11 @@ const GridOffice = (props: SVGProps) => ( const GridStore = (props: SVGProps) => ( @@ -1109,61 +1033,51 @@ const GridStore = (props: SVGProps) => ( const GridWrite = (props: SVGProps) => ( , + url: ROUTES.EXPERTIZA_STROIT, + }, + { + id: 1, + title: 'Автотехническая экспертиза', + icon: , + url: ROUTES.EXPERTIZA_AUTOTECH, + }, + { + id: 2, + title: 'Кадастровая экспертиза', + icon: , + url: ROUTES.EXPERTIZA_KADASTR, + }, + { + id: 3, + title: 'Технико-криминалистическая экспертиза', + icon: , + url: ROUTES.EXPERTIZA_TECH_CRIM, + }, + { + id: 4, + title: 'Компьютерно-техническая экспертиза', + icon: , + url: ROUTES.EXPERTIZA_COPMPUTER, + }, + { + id: 5, + title: 'Товароведческая экспертиза', + icon: , + url: ROUTES.EXPERTIZA_TOVAR, + }, + { + id: 6, + title: 'Трасологическая экспертиза', + icon: , + url: ROUTES.EXPERTIZA_TRASOLOGIA, + }, + { + id: 7, + title: 'Бухгалтерская экспертиза', + icon: , + url: ROUTES.EXPERTIZA_BUHGALTER, + }, + ], + ocenka: [ + { + id: 0, + title: 'Оценка недвижимого имущества', + icon: , + url: ROUTES.OCENKA_NEDVIGA, + }, + { + id: 1, + title: 'Оценка движимого имущества', + icon: , + url: ROUTES.OCENKA_RYNOCHNAYA, + }, + { + id: 2, + title: 'Оценка для наследства', + icon: , + url: ROUTES.OCENKA_NASLEDSTVO, + }, + { + id: 3, + title: 'Оценка предприятия, бизнеса', + icon: , + url: ROUTES.OCENKA_BUSINESS, + }, + { + id: 4, + title: 'Оценка арендной платы', + icon: , + url: ROUTES.OCENKA_ARENDA, + }, + { + id: 5, + title: 'Оценка для ипотеки', + icon: , + url: ROUTES.OCENKA_IPOTEKA, + }, + { + id: 6, + title: 'Оценка для нотариуса', + icon: , + url: ROUTES.OCENKA_NOTARIUS, + }, + { + id: 7, + title: 'Оценка машин и оборудования', + icon: , + url: ROUTES.OCENKA_MASHINES, + }, + ], + jurist: [ + { + id: 0, + title: 'Представительство в суде', + icon: , + url: ROUTES.JURIST_PREDSTAVITELSTVO, + }, + { + id: 1, + title: 'Банкротство физических лиц', + icon: , + url: ROUTES.JURIST_BANKROTSTVO, + }, + { + id: 2, + title: 'Сопровождение сделок, составление договоров', + icon: , + url: ROUTES.JURIST_SDELKI_DOGOVORA, + }, + { + id: 3, + title: 'Споры с застройщиком', + icon: , + url: ROUTES.JURIST_ZEM_SPORY, + }, + { + id: 4, + title: 'Споры со страховой компанией', + icon: , + url: ROUTES.JURIST_STRAHOVKA, + }, + { + id: 5, + title: 'Помощь должникам', + icon: , + url: ROUTES.JURIST_DOLZHNIKAM, + }, + { + id: 6, + title: 'Взыскание долгов с юридических лиц', + icon: , + url: ROUTES.JURIST_DOLGI, + }, + { + id: 7, + title: 'Споры по ДТП', + icon: , + url: ROUTES.JURIST_DTP, + }, + ], +}; diff --git a/src/widgets/service-grid/styles.module.scss b/src/widgets/service-grid/styles.module.scss index 8582501..60fa2b1 100644 --- a/src/widgets/service-grid/styles.module.scss +++ b/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 { - & img { - fill: $color-green; - } + svg { + width: 64px; + height: 64px; } } } \ No newline at end of file diff --git a/src/widgets/service-grid/ui.tsx b/src/widgets/service-grid/ui.tsx index 1947f47..c5a6539 100644 --- a/src/widgets/service-grid/ui.tsx +++ b/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.EXPERTISE, + ); + + const handleSwitch = (switcher: SwitcherOption) => () => { + setSwitcher(switcher); + }; + return (

Выберите услугу

-
Экспертиза
-
Оценка
-
Юрист
+
+ Экспертиза +
+
+ Оценка +
+
+ Юрист +
- {servicesData.expertise.map(({ id, title, icon, url }, i) => ( -
- {title} - {title} -
+ {servicesData[switcher].map(({ id, title, icon, url }, i) => ( + +
+ {icon} + {title} +
+ ))}
@@ -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, - }, - ], -};