feat: modals

src/app/layout.tsx

@@ -10,12 +10,20 @@ import { theme } from "@/theme";
 import "@/app/global.css";
 import { Notifications } from "@mantine/notifications";
 import ReduxProvider from "@/providers/ReduxProvider";
+import { ModalsProvider } from "@mantine/modals";
+import { modals } from "@/modals/modals";
 
 export const metadata = {
     title: "CRM LogiDex",
     description: "CRM LogiDex",
 };
 
+declare module "@mantine/modals" {
+    export interface MantineModalsOverride {
+        modals: typeof modals;
+    }
+}
+
 type Props = {
     children: ReactNode;
 };
@@ -45,7 +53,13 @@ export default function RootLayout({ children }: Props) {
                 <MantineProvider
                     theme={theme}
                     defaultColorScheme={"auto"}>
-                    <ReduxProvider>{children}</ReduxProvider>
+                    <ReduxProvider>
+                        <ModalsProvider
+                            labels={{ confirm: "Да", cancel: "Нет" }}
+                            modals={modals}>
+                            {children}
+                        </ModalsProvider>
+                    </ReduxProvider>
                     <Notifications position="bottom-right" />
                 </MantineProvider>
             </body>

src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,10 +1,20 @@
 "use client";
 
 import { Button, Group, useMantineColorScheme } from "@mantine/core";
+import { modals } from "@mantine/modals";
 
 export function ColorSchemeToggle() {
     const { setColorScheme } = useMantineColorScheme();
 
+    const openTestModal = () => {
+        modals.openContextModal({
+            modal: "testModal",
+            title: "Тест",
+            withCloseButton: false,
+            innerProps: {},
+        });
+    };
+
     return (
         <Group
             justify="center"
@@ -12,6 +22,7 @@ export function ColorSchemeToggle() {
             <Button onClick={() => setColorScheme("light")}>Light</Button>
             <Button onClick={() => setColorScheme("dark")}>Dark</Button>
             <Button onClick={() => setColorScheme("auto")}>Auto</Button>
+            <Button onClick={() => openTestModal()}>Modal</Button>
         </Group>
     );
 }

src/modals/TestModal/TestModal.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { Flex, rem, Text } from "@mantine/core";
+import { ContextModalProps } from "@mantine/modals";
+
+const TestModal = ({ id, context, innerProps }: ContextModalProps) => {
+    return (
+        <Flex
+            gap={rem(10)}
+            direction={"column"}>
+            <Text>Hi</Text>
+        </Flex>
+    );
+};
+
+export default TestModal;

src/modals/modals.ts

@@ -0,0 +1,5 @@
+import TestModal from "@/modals/TestModal/TestModal";
+
+export const modals = {
+    testModal: TestModal,
+};

src/theme.ts

@@ -34,5 +34,10 @@ export const theme = createTheme({
                 size,
             },
         },
+        Modal: {
+            defaultProps: {
+                radius,
+            },
+        },
     },
 });