refactor: separation of shared components

src/components/ui/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,28 @@
+"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"
+            mt="xl">
+            <Button onClick={() => setColorScheme("light")}>Light</Button>
+            <Button onClick={() => setColorScheme("dark")}>Dark</Button>
+            <Button onClick={() => setColorScheme("auto")}>Auto</Button>
+            <Button onClick={() => openTestModal()}>Modal</Button>
+        </Group>
+    );
+}