refactoring

src/app/services/components/ServicesList/ServicesList.module.css

@@ -0,0 +1,7 @@
+.container {
+    width: 400px;
+
+    @media (max-width: 48em) {
+        width: 100%;
+    }
+}

src/app/services/components/ServicesList/ServicesList.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useMemo } from "react";
+import { redirect } from "next/navigation";
+import { Button, Stack, Title } from "@mantine/core";
+import styles from "@/app/services/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("consent");
+    };
+
+    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;

src/app/services/page.tsx

@@ -0,0 +1,15 @@
+import Logo from "@/components/Logo/Logo";
+import PageItem from "@/components/PageBlock/PageItem";
+import PageContainer from "@/components/PageContainer/PageContainer";
+import ServicesList from "@/app/services/components/ServicesList/ServicesList";
+
+export default function ServicesPage() {
+    return (
+        <PageContainer center>
+            <PageItem fullScreenMobile>
+                <Logo title={"Сервисы LogiDex"} />
+                <ServicesList />
+            </PageItem>
+        </PageContainer>
+    );
+}