forked from Simnation/Main
62 lines
No EOL
1.8 KiB
TypeScript
62 lines
No EOL
1.8 KiB
TypeScript
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 |