feat: select view buttons

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

@@ -18,13 +18,6 @@
     }
 }
 
-.mobile-margin-height {
-    height: var(--page-height);
-    @media (min-width: 48em) {
-        margin: var(--mantine-spacing-md);
-    }
-}
-
 .container-full-height {
     min-height: var(--page-height);
     height: var(--page-height);

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

@@ -5,6 +5,7 @@
     background-color: transparent;
 
     @media (min-width: 48em) {
-        gap: rem(10);
+        gap: var(--mantine-spacing-md);
+        padding: var(--mantine-spacing-md);
     }
 }

src/components/layout/SmallPageBlock/SmallPageBlock.module.css

@@ -0,0 +1,33 @@
+
+.container {
+    border-radius: var(--mantine-radius-lg);
+
+    @mixin dark {
+        background-color: var(--mantine-color-dark-7-5);
+        box-shadow: var(--dark-shadow);
+    }
+    @mixin light {
+        background-color: var(--color-light-whitesmoke);
+        box-shadow: var(--light-shadow);
+    }
+}
+
+.container-active {
+    @mixin dark {
+        color: dodgerblue;
+    }
+    @mixin light {
+        background-color: var(--color-light-aqua);
+        box-shadow: var(--light-thick-shadow);
+    }
+}
+
+.container:hover {
+    @mixin dark {
+        box-shadow: var(--dark-thick-shadow);
+    }
+    @mixin light {
+        background-color: var(--color-light-aqua);
+        box-shadow: var(--light-thick-shadow);
+    }
+}

src/components/layout/SmallPageBlock/SmallPageBlock.tsx

@@ -0,0 +1,24 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import classNames from "classnames";
+import { Box } from "@mantine/core";
+import styles from "@/components/layout/SmallPageBlock/SmallPageBlock.module.css";
+
+type Props = {
+    children: ReactNode;
+    style?: CSSProperties;
+    active?: boolean;
+};
+
+const SmallPageBlock: FC<Props> = ({ children, style, active = false }) => {
+    return (
+        <Box
+            className={classNames(
+                styles.container,
+                active && styles["container-active"]
+            )}
+            style={style}>
+            {children}
+        </Box>
+    );
+};
+export default SmallPageBlock;