edit

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

@@ -0,0 +1,73 @@
+import React, { useState, useRef } from "react"
+import { DEFAULT_THEME, Paper, Text, Divider, Stack, Button } from '@mantine/core'
+import { fetchNui } from "../utils/fetchNui"
+import { useNuiEvent } from "../hooks/useNuiEvent"
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import * as Icons from '@fortawesome/free-solid-svg-icons'
+import { IconProp } from '@fortawesome/fontawesome-svg-core'
+
+const Dialogue: React.FC = () => {
+    const theme = DEFAULT_THEME
+    const [options, setOptions] = useState([])
+    const [label, setLabel] = useState('')
+    const [speech, setSpeech] = useState('')
+    
+    useNuiEvent<any>('dialogue', (data) => {
+        setOptions(data.options)
+        setLabel(data.label)
+        setSpeech(data.speech)
+    })
+
+    const getIconByName = (iconName: string) => {
+        const formattedName = `fa${iconName.charAt(0).toUpperCase() + iconName.slice(1).replace(/-./g, (m) => m[1].toUpperCase())}`
+        return Icons[formattedName as keyof typeof Icons] || Icons.faQuestionCircle
+    }
+
+    return (
+        <div
+            style={{
+                width: '100%',
+                height: '100%',
+                margin: -8, 
+                position: 'fixed',
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'flex-end',
+                background: `linear-gradient(180deg, rgba(255, 255, 255, 0) 75%, rgba(0, 0, 0, 0.80) 100%)`
+            }}
+        >
+            <Stack miw={500} maw={1000} m={50} spacing={5}>
+                <Text size="xl" fw={700} color="white">{label}</Text>
+                <Paper withBorder p={5} pl={10}>
+                    <Text color="white" size="lg" fw={500}>{speech}</Text>
+                </Paper>
+                <Divider />
+                <div
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'row',
+                        justifyContent: 'center',
+                        flexWrap: 'wrap',
+                        gap: 10
+                    }}
+                >
+                    {options.length > 0 && options.map(({ label, icon, id, close, canInteract }) => (
+                        canInteract && <Button
+                            color="gray"
+                            bg={theme.colors.dark[7]}
+                            leftIcon={<FontAwesomeIcon icon={getIconByName(icon) as IconProp} />}
+                            style={{
+                                border: `1px solid ${theme.colors.dark[4]}`
+                            }}
+                            onClick={() => fetchNui('executeAction', { id, options, close })}
+                        >
+                            {label}
+                        </Button>
+                    ))}
+                </div>
+            </Stack>
+        </div>
+    )
+}
+
+export default Dialogue