'init'

app/components/SettingsAlert/SettingsAlert.tsx

@@ -0,0 +1,35 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { Flex, Paper, Text, useMantineTheme } from "@mantine/core";
+import { IconAlertTriangleFilled } from "@tabler/icons-react";
+
+interface SettingsAlertProps {
+    text: string;
+    type? : 'info' | 'warning' | 'error';
+}
+
+export function SettingsAlert(props : SettingsAlertProps) {
+    const theme = useMantineTheme();
+    const type = props.type || 'warning';
+    const colors = useRosettaColors();
+    return (
+        <Paper withBorder style={{
+            borderTop: '1px solid ' + colors.borderColor,
+            borderBottom: '1px solid ' + colors.borderColor,
+            borderLeft: '1px solid ' + colors.borderColor,
+            borderRight: '1px solid ' + colors.borderColor,
+        }} color={'red'} p={'lg'}>
+            <Flex align={'center'} direction={'column'} justify={'center'}>
+                {type == 'warning' && <>
+                    <IconAlertTriangleFilled size={48} color={theme.colors.yellow[6]}></IconAlertTriangleFilled>
+                </>}
+                {type == 'error' && <>
+                    <IconAlertTriangleFilled size={48} color={theme.colors.red[6]}></IconAlertTriangleFilled>
+                </>}
+                {type == 'info' && <>
+                    <IconAlertTriangleFilled size={48} color={theme.colors.blue[6]}></IconAlertTriangleFilled>
+                </>}
+                <Text mt={'sm'} c={'gray'} size={'sm'} ta={'center'}>{props.text}</Text>
+            </Flex>
+        </Paper>
+    );
+}