forked from Simnation/Main
64 lines
2 KiB
TypeScript
64 lines
2 KiB
TypeScript
|
import React, { useState } from "react"
|
||
|
|
import { DEFAULT_THEME, Paper, Text, Kbd } from '@mantine/core'
|
||
|
|
import { useNuiEvent } from "../hooks/useNuiEvent"
|
||
|
|
|
||
|
|
const TextUI: React.FC = () => {
|
||
|
|
const theme = DEFAULT_THEME
|
||
|
|
const [key, setKey] = useState('')
|
||
|
|
const [label, setLabel] = useState('')
|
||
|
|
const [position, setPosition] = useState('')
|
||
|
|
|
||
|
|
useNuiEvent<any>('textUI', (data) => {
|
||
|
|
setKey(data.key)
|
||
|
|
setLabel(data.label)
|
||
|
|
setPosition(data.position)
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
margin: -8,
|
||
|
|
position: 'fixed',
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: ((position == 'bottom' || position == 'top') ? 'center' : ''),
|
||
|
|
alignItems: ((position == 'right' || position == 'left') ? 'center' : '')
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
maxWidth: 400,
|
||
|
|
position: 'absolute',
|
||
|
|
bottom: (position == 'bottom' ? 20 : 'auto'),
|
||
|
|
top: (position == 'top' ? 20 : 'auto'),
|
||
|
|
right: (position == 'right' ? 20 : 'auto'),
|
||
|
|
left: (position == 'left' ? 20 : 'auto'),
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'column',
|
||
|
|
justifyContent: 'center',
|
||
|
|
textAlign: 'center',
|
||
|
|
gap: 5
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Paper
|
||
|
|
withBorder
|
||
|
|
radius="sm"
|
||
|
|
p={5}
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'flex-start',
|
||
|
|
alignItems: 'flex-start',
|
||
|
|
gap: 5
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Kbd>{key}</Kbd>
|
||
|
|
<Text fw={700}>{label}</Text>
|
||
|
|
</Paper>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default TextUI
|