edit

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

@@ -0,0 +1,64 @@
+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