'init'

app/components/SettingsPaper/SettingsPaper.tsx

@@ -0,0 +1,27 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { MantineSize, Paper } from "@mantine/core";
+
+export interface SettingsPaperProps {
+    children: React.ReactNode;
+    mt?: MantineSize;
+    style?: React.CSSProperties;
+    p?: MantineSize;
+}
+
+export function SettingsPaper(props: SettingsPaperProps) {
+    const colors = useRosettaColors();
+
+    return (
+        <Paper mt={props.mt} p={props.p} style={props.style} withBorder styles={{
+                root: {
+                    borderTop: '1px solid ' + colors.borderColor,
+                    borderBottom: '1px solid ' + colors.borderColor,
+                    borderLeft: '1px solid ' + colors.borderColor,
+                    borderRight: '1px solid ' + colors.borderColor,
+                }
+            }}
+        >
+            {props.children}
+        </Paper>    
+    );
+}