redrockjs/ocenka-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(home): service grid

Browse Source
This commit is contained in:
Valery Grunenko
2025-12-02 11:28:27 +03:00
parent ee13a7e056
commit de017bdfef
6 changed files with 350 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

222
src/widgets/service-grid/ui.tsx
View File

@@ -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 className={s.Button}>Оценка</div>
<div className={s.Button}>Юрист</div>
<div
className={clsx(
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) => (
<div key={id} className={s.Tile}>
<Image
className={s.Icon}
src={icon}
alt={title}
width={100}
height={100}
/>
{title}
</div>
{servicesData[switcher].map(({ id, title, icon, url }, i) => (
<Link key={id} href={url}>
<div className={s.Tile}>
{icon}
{title}
</div>
</Link>
))}
</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,
},
],
};