feat: login form as a client component, theme toggle

components/PageBlock/PageItem.module.css

@@ -0,0 +1,26 @@
+.container {
+    border-radius: rem(20);
+    background-color: white;
+    @mixin dark {
+        background-color: var(--mantine-color-dark-8);
+        box-shadow: 0 8px 12px var(--mantine-color-dark-6),
+        0 8px 32px 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);
+}
+
+.container-full-height {
+    min-height: calc(100vh - (rem(20) * 2));
+}
+
+.container-full-height-fixed {
+    height: calc(100vh - (rem(20) * 2));
+}
+
+.container-no-border-radius {
+    border-radius: 0 !important;
+}

components/PageBlock/PageItem.tsx

@@ -0,0 +1,33 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import classNames from "classnames";
+import styles from "./PageItem.module.css";
+
+type Props = {
+    children: ReactNode;
+    style?: CSSProperties;
+    fullHeight?: boolean;
+    fullHeightFixed?: boolean;
+    noBorderRadius?: boolean;
+};
+
+const PageItem: FC<Props> = ({
+    children,
+    style,
+    fullHeight = false,
+    fullHeightFixed = false,
+    noBorderRadius = false,
+}) => {
+    return (
+        <div
+            style={style}
+            className={classNames(
+                styles.container,
+                fullHeight && styles["container-full-height"],
+                fullHeightFixed && styles["container-full-height-fixed"],
+                noBorderRadius && styles["container-no-border-radius"]
+            )}>
+            {children}
+        </div>
+    );
+};
+export default PageItem;