35 lines
1.5 KiB
TypeScript
35 lines
1.5 KiB
TypeScript
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>
|
|
);
|
|
} |