feat: modules and module-editor pages

src/app/module-editor/[moduleId]/components/shared/AttributesTable/AttributesTable.tsx

@@ -0,0 +1,34 @@
+import { Box, Center, Text } from "@mantine/core";
+import useAttributesTableColumns from "@/app/module-editor/[moduleId]/components/shared/AttributesTable/useAttributesTableColumns";
+import { useModuleEditorContext } from "@/app/module-editor/[moduleId]/contexts/ModuleEditorContext";
+import BaseTable from "@/components/ui/BaseTable/BaseTable";
+
+const AttributesTable = () => {
+    const { attributes } = useModuleEditorContext();
+    const columns = useAttributesTableColumns();
+
+    if (attributes.length === 0) {
+        return (
+            <Center my={"md"}>
+                <Text>Нет атрибутов</Text>
+            </Center>
+        );
+    }
+
+    return (
+        <Box
+            h="100%"
+            style={{ overflow: "auto" }}>
+            <BaseTable
+                withTableBorder
+                columns={columns}
+                records={attributes}
+                verticalSpacing={"md"}
+                groups={undefined}
+                styles={{ table: { width: "100%" } }}
+            />
+        </Box>
+    );
+};
+
+export default AttributesTable;

src/app/module-editor/[moduleId]/components/shared/AttributesTable/useAttributesTableColumns.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useMemo } from "react";
+import { DataTableColumn } from "mantine-datatable";
+import { Center } from "@mantine/core";
+import AttributeTableActions from "@/app/module-editor/[moduleId]/components/shared/AttributeTableActions/AttributeTableActions";
+import useIsMobile from "@/hooks/utils/useIsMobile";
+import { AttributeSchema } from "@/lib/client";
+
+const useAttributesTableColumns = () => {
+    const isMobile = useIsMobile();
+
+    return useMemo(
+        () =>
+            [
+                {
+                    title: "Название",
+                    accessor: "label",
+                },
+                {
+                    title: "Тип",
+                    accessor: "type.name",
+                },
+                {
+                    accessor: "actions",
+                    title: <Center>Действия</Center>,
+                    width: "0%",
+                    render: attribute => (
+                        <AttributeTableActions attribute={attribute} />
+                    ),
+                },
+            ] as DataTableColumn<AttributeSchema>[],
+        [isMobile]
+    );
+};
+
+export default useAttributesTableColumns;