diff --git a/package.json b/package.json index 81c1d8f..5195654 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@mantine/core": "8.1.2", "@mantine/form": "^8.1.3", "@mantine/hooks": "8.1.2", + "@mantine/modals": "^8.2.1", "@mantine/notifications": "^8.2.1", "@next/bundle-analyzer": "^15.3.3", "@reduxjs/toolkit": "^2.8.2", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2d59225..f1855fb 100644 --- a/src/app/layout.tsx +++ b/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) { - {children} + + + {children} + + diff --git a/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx b/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx index bf41f4f..7326a7a 100644 --- a/src/components/ColorSchemeToggle/ColorSchemeToggle.tsx +++ b/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 ( setColorScheme("light")}>Light + ); } diff --git a/src/modals/TestModal/TestModal.tsx b/src/modals/TestModal/TestModal.tsx new file mode 100644 index 0000000..dc21255 --- /dev/null +++ b/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 ( + + Hi + + ); +}; + +export default TestModal; diff --git a/src/modals/modals.ts b/src/modals/modals.ts new file mode 100644 index 0000000..c947bd4 --- /dev/null +++ b/src/modals/modals.ts @@ -0,0 +1,5 @@ +import TestModal from "@/modals/TestModal/TestModal"; + +export const modals = { + testModal: TestModal, +}; diff --git a/src/theme.ts b/src/theme.ts index 9b9aa0b..2c047ce 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -34,5 +34,10 @@ export const theme = createTheme({ size, }, }, + Modal: { + defaultProps: { + radius, + }, + }, }, }); diff --git a/yarn.lock b/yarn.lock index 83aa578..c3859b8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2776,6 +2776,18 @@ __metadata: languageName: node linkType: hard +"@mantine/modals@npm:^8.2.1": + version: 8.2.1 + resolution: "@mantine/modals@npm:8.2.1" + peerDependencies: + "@mantine/core": 8.2.1 + "@mantine/hooks": 8.2.1 + react: ^18.x || ^19.x + react-dom: ^18.x || ^19.x + checksum: 10c0/a11dac5431d1b1828fe2b79e2a0967edb68e05fade781b2f95bc21a2c871d4446659e8d1001a38203455bdfd06f22d00558cad83e067992c6900f13c0fd8b154 + languageName: node + linkType: hard + "@mantine/notifications@npm:^8.2.1": version: 8.2.1 resolution: "@mantine/notifications@npm:8.2.1" @@ -5817,6 +5829,7 @@ __metadata: "@mantine/core": "npm:8.1.2" "@mantine/form": "npm:^8.1.3" "@mantine/hooks": "npm:8.1.2" + "@mantine/modals": "npm:^8.2.1" "@mantine/notifications": "npm:^8.2.1" "@next/bundle-analyzer": "npm:^15.3.3" "@reduxjs/toolkit": "npm:^2.8.2"