feat(web/dialog): alert dialog

resource/interface/client/alert.lua

@@ -0,0 +1,12 @@
+function lib.alertDialog(data)
+    SetNuiFocus(true, true)
+    SendNUIMessage({
+        action = 'sendAlert',
+        data = data
+    })
+end
+
+RegisterNUICallback('closeAlert', function(_, cb)
+    cb(1)
+    SetNuiFocus(false, false)
+end)

web/src/App.tsx

@@ -8,6 +8,7 @@ import Settings from "./features/settings";
 import { useNuiEvent } from "./hooks/useNuiEvent";
 import { setClipboard } from "./utils/setClipboard";
 import { fetchNui } from "./utils/fetchNui";
+import AlertDialog from "./features/dialog/AlertDialog";
 
 const App: React.FC = () => {
   useNuiEvent("setClipboard", (data: string) => {
@@ -24,6 +25,7 @@ const App: React.FC = () => {
       <Notifications />
       <TextUI />
       <InputDialog />
+      <AlertDialog />
       <ContextMenu />
     </>
   );

web/src/features/dialog/AlertDialog.tsx

@@ -0,0 +1,82 @@
+import {
+  AlertDialog as Dialog,
+  AlertDialogBody,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogContent,
+  AlertDialogOverlay,
+  useDisclosure,
+  Button,
+} from "@chakra-ui/react";
+import { useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { useNuiEvent } from "../../hooks/useNuiEvent";
+import { debugData } from "../../utils/debugData";
+import { fetchNui } from "../../utils/fetchNui";
+
+interface DialogProps {
+  header: string;
+  content: string;
+  button: string;
+  centered?: boolean;
+}
+
+debugData<DialogProps>([
+  {
+    action: "sendAlert",
+    data: {
+      header: "Hello there",
+      content: "General kenobi  \n Markdown works",
+      button: "Ok",
+      centered: true,
+    },
+  },
+]);
+
+const AlertDialog: React.FC = () => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const cancelRef = useRef(null);
+  const [dialogData, setDialogData] = useState<DialogProps>({
+    header: "",
+    content: "",
+    button: "",
+  });
+
+  const closeAlert = () => {
+    onClose();
+    fetchNui("closeAlert");
+  };
+
+  useNuiEvent("sendAlert", (data: DialogProps) => {
+    setDialogData(data);
+    onOpen();
+  });
+
+  return (
+    <>
+      <Dialog
+        leastDestructiveRef={cancelRef}
+        onClose={onClose}
+        isOpen={isOpen}
+        isCentered={dialogData.centered}
+        closeOnOverlayClick={false}
+        onEsc={closeAlert}
+      >
+        <AlertDialogOverlay />
+        <AlertDialogContent fontFamily="Inter">
+          <AlertDialogHeader fontSize="lg" fontWeight="bold">
+            {dialogData.header}
+          </AlertDialogHeader>
+          <AlertDialogBody>
+            <ReactMarkdown>{dialogData.content}</ReactMarkdown>
+          </AlertDialogBody>
+          <AlertDialogFooter>
+            <Button onClick={closeAlert}>{dialogData.button}</Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default AlertDialog;

web/src/features/dialog/InputDialog.tsx

@@ -23,29 +23,29 @@ interface Props {
   rows: Row[];
 }
 
-debugData<Props>([
-  {
-    action: "openDialog",
-    data: {
-      heading: "Police locker",
-      rows: [
-        { type: "input", label: "Locker number" },
-        { type: "checkbox", label: "Some checkbox" },
-        { type: "input", label: "Locker PIN", password: true, icon: "lock" },
-        { type: "checkbox", label: "Some other checkbox" },
-        {
-          type: "select",
-          label: "Locker type",
-          options: [
-            { value: "option1", label: "Option 1" },
-            { value: "option2", label: "Option 2" },
-            { value: "option3", label: "Option 3" },
-          ],
-        },
-      ],
-    },
-  },
-]);
+// debugData<Props>([
+//   {
+//     action: "openDialog",
+//     data: {
+//       heading: "Police locker",
+//       rows: [
+//         { type: "input", label: "Locker number" },
+//         { type: "checkbox", label: "Some checkbox" },
+//         { type: "input", label: "Locker PIN", password: true, icon: "lock" },
+//         { type: "checkbox", label: "Some other checkbox" },
+//         {
+//           type: "select",
+//           label: "Locker type",
+//           options: [
+//             { value: "option1", label: "Option 1" },
+//             { value: "option2", label: "Option 2" },
+//             { value: "option3", label: "Option 3" },
+//           ],
+//         },
+//       ],
+//     },
+//   },
+// ]);
 
 const InputDialog: React.FC = () => {
   const [fields, setFields] = React.useState<Props>({