73 lines
No EOL
2.8 KiB
TypeScript
73 lines
No EOL
2.8 KiB
TypeScript
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 |