refactor: separation of shared components

src/components/layout/PageBlock/PageBlock.module.css

@@ -0,0 +1,41 @@
+.container {
+    border-radius: rem(40);
+    background-color: white;
+    @mixin dark {
+        background-color: var(--mantine-color-dark-8);
+        box-shadow: 5px 5px 30px 1px var(--mantine-color-dark-6);
+    }
+    @mixin light {
+        box-shadow: 5px 5px 24px rgba(0, 0, 0, 0.16);
+    }
+    padding: rem(35);
+}
+
+.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;
+}
+
+.container-full-screen-mobile {
+    @media (max-width: 48em) {
+        min-height: 100vh;
+        height: 100vh;
+        width: 100vw;
+        border-radius: 0 !important;
+        padding: rem(40) rem(20) rem(20);
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 100;
+        overflow-y: auto;
+    }
+}

src/components/layout/PageBlock/PageBlock.tsx

@@ -0,0 +1,36 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import classNames from "classnames";
+import styles from "./PageBlock.module.css";
+5
+type Props = {
+    children: ReactNode;
+    style?: CSSProperties;
+    fullHeight?: boolean;
+    fullHeightFixed?: boolean;
+    noBorderRadius?: boolean;
+    fullScreenMobile?: boolean;
+};
+
+const PageBlock: FC<Props> = ({
+    children,
+    style,
+    fullHeight = false,
+    fullHeightFixed = false,
+    noBorderRadius = false,
+    fullScreenMobile = 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"],
+                fullScreenMobile && styles["container-full-screen-mobile"]
+            )}>
+            {children}
+        </div>
+    );
+};
+export default PageBlock;

src/components/layout/PageContainer/PageContainer.module.css

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: rem(10);
+    min-height: 86vh;
+    background-color: transparent;
+}

src/components/layout/PageContainer/PageContainer.tsx

@@ -0,0 +1,24 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import styles from "./PageContainer.module.css";
+
+type Props = {
+    children: ReactNode;
+    style?: CSSProperties;
+    center?: boolean;
+};
+
+const PageContainer: FC<Props> = ({ children, style, center }) => {
+    return (
+        <div
+            className={styles.container}
+            style={{
+                ...style,
+                alignItems: center ? "center" : "",
+                justifyContent: center ? "center" : "",
+            }}>
+            {children}
+        </div>
+    );
+};
+
+export default PageContainer;