'init'

app/components/AttachmentError/AttachmentError.tsx

@@ -0,0 +1,22 @@
+import { useRosettaColors } from "@/app/hooks/useRosettaColors";
+import { Box, Flex, Text } from "@mantine/core";
+import { IconX } from "@tabler/icons-react";
+
+export function AttachmentError() {
+    const colors = useRosettaColors();
+    return (
+        <Box style={{
+            border: `1px solid ${colors.borderColor}`,
+            borderRadius: '8px',
+            padding: '12px',
+            backgroundColor: colors.mainColor,
+        }}>
+            <Flex direction={'row'} gap={'sm'} align={'center'}>
+                <IconX size={30} color={colors.error}></IconX>
+                <Text size={'xs'}>
+                    This attachment is no longer available because it was sent for a previous version of the app.
+                </Text>
+            </Flex>
+        </Box>
+    );
+}