edit

resources/[tools]/mt_lib/web/src/components/MissionStatus.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react"
+import { DEFAULT_THEME, Paper, Text, Divider, TypographyStylesProvider } from '@mantine/core'
+import { useNuiEvent } from "../hooks/useNuiEvent"
+
+const MissionStatus: React.FC = () => {
+    const theme = DEFAULT_THEME
+    const [title, setTitle] = useState('')
+    const [text, setText] = useState('')
+    
+    useNuiEvent<any>('missionStatus', (data) => {
+        setTitle(data.title)
+        setText(data.text)
+    })
+
+    return (
+        <div
+            style={{
+                width: '100%',
+                height: '100%',
+                margin: -8, 
+                position: 'fixed',
+                display: 'flex',
+                alignItems: 'center'
+            }}
+        >
+            <div
+                style={{
+                    maxWidth: 400,
+                    position: 'absolute',
+                    left: 20,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'center',
+                    textAlign: 'center',
+                    gap: 5
+                }}
+            >
+                <Text size="xl" color="white" fw={700}>{title}</Text>
+                <Divider
+                    color="dark.0"
+                    size="lg"
+                    style={{
+                        borderRadius: theme.radius.md
+                    }}
+                />
+                <Paper p={10} withBorder radius="sm">
+                    <TypographyStylesProvider
+                        style={{
+                            textAlign: 'left'
+                        }}
+                    >
+                        <div
+                            dangerouslySetInnerHTML={{ __html: text }}
+                        />
+                    </TypographyStylesProvider>
+                </Paper>
+            </div>
+        </div>
+    )
+}
+
+export default MissionStatus