73 lines
1.7 KiB
TypeScript
73 lines
1.7 KiB
TypeScript
'use client';
|
||
|
||
import s from './styles.module.scss';
|
||
import clsx from 'clsx';
|
||
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,
|
||
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[switcher].map(({ id, title, icon, url }, i) => (
|
||
<Link key={id} href={url}>
|
||
<div className={s.Tile}>
|
||
{icon}
|
||
{title}
|
||
</div>
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
export { ServiceGrid };
|