67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useMemo } from "react";
|
|
import { redirect } from "next/navigation";
|
|
import { Button, Stack, Title } from "@mantine/core";
|
|
import styles from "@/components/ServicesList/ServicesList.module.css";
|
|
import TitleWithLines from "@/components/TitleWithLines/TitleWithLines";
|
|
import SERVICES from "@/constants/services";
|
|
import { ServiceCode } from "@/enums/ServiceCode";
|
|
import { setTargetService } from "@/lib/features/targetService/targetServiceSlice";
|
|
import { useAppDispatch } from "@/lib/store";
|
|
import ServiceData from "@/types/ServiceData";
|
|
|
|
const ServicesList = () => {
|
|
const dispatch = useAppDispatch();
|
|
const services = useMemo(
|
|
() =>
|
|
Object.entries(SERVICES)
|
|
.filter(([key]) => key !== ServiceCode.UNDEFINED)
|
|
.map(([, value]) => value),
|
|
[SERVICES]
|
|
);
|
|
|
|
const onServiceClick = (service: ServiceData) => {
|
|
dispatch(setTargetService(service.code));
|
|
redirect("confirm-access");
|
|
};
|
|
|
|
const getServiceButton = (service: ServiceData, key: number) => {
|
|
return (
|
|
<Button
|
|
key={key}
|
|
size={"xl"}
|
|
onClick={() => onServiceClick(service)}>
|
|
<Stack gap={0}>
|
|
<Title order={4}>{service.name}</Title>
|
|
</Stack>
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
const getServiceInDevelopment = (title: string) => {
|
|
return (
|
|
<Button
|
|
size={"xl"}
|
|
onClick={() => {}}
|
|
disabled>
|
|
<Stack gap={0}>
|
|
<Title order={4}>{title}</Title>
|
|
</Stack>
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Stack
|
|
className={styles.container}
|
|
gap={"lg"}>
|
|
{services.map((service, i) => getServiceButton(service, i))}
|
|
<TitleWithLines title="Скоро будет" />
|
|
{getServiceInDevelopment("Analytics")}
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default ServicesList;
|