feat: login form as a client component, theme toggle

components/ColorSchemeToggle/ActionToggle.module.css

@@ -0,0 +1,32 @@
+.container {
+  @mixin dark {
+    box-shadow: 0 2px 4px var(--mantine-color-dark-6),
+    0 4px 24px var(--mantine-color-dark-6);
+  }
+  @mixin light {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16),
+    0 4px 24px rgba(0, 0, 0, 0.16);
+  }
+  padding: rem(25);
+}
+
+.icon {
+  width: rem(18px);
+  height: rem(18px);
+}
+
+.light {
+  display: block;
+}
+
+.dark {
+  display: none;
+}
+
+:global([data-mantine-color-scheme='dark']) .light {
+  display: none;
+}
+
+:global([data-mantine-color-scheme='dark']) .dark {
+  display: block;
+}

components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { IconMoon, IconSun } from "@tabler/icons-react";
+import classNames from "classnames";
+import {
+    ActionIcon,
+    useComputedColorScheme,
+    useMantineColorScheme,
+} from "@mantine/core";
+import style from "./ActionToggle.module.css";
+
+export function ColorSchemeToggle() {
+    const { setColorScheme } = useMantineColorScheme();
+    const computedColorScheme = useComputedColorScheme("light", {
+        getInitialValueInEffect: true,
+    });
+
+    return (
+        <ActionIcon
+            onClick={() =>
+                setColorScheme(
+                    computedColorScheme === "light" ? "dark" : "light"
+                )
+            }
+            variant="default"
+            size="xl"
+            radius="md"
+            aria-label="Toggle color scheme"
+            className={style.container}>
+            <IconSun
+                className={classNames(style.icon, style.light)}
+                stroke={1.5}
+            />
+            <IconMoon
+                className={classNames(style.icon, style.dark)}
+                stroke={1.5}
+            />
+        </ActionIcon>
+    );
+}