diff --git a/web/src/components/App.tsx b/web/src/components/App.tsx
index d353cc2..292a549 100644
--- a/web/src/components/App.tsx
+++ b/web/src/components/App.tsx
@@ -3,6 +3,7 @@ import CircleProgressbar from "./CircleProgressbar";
import Progressbar from "./Progressbar";
import TextUI from "./TextUI";
import InputDialog from "./InputDialog";
+import ContextMenu from "./ContextMenu";
const App: React.FC = () => {
return (
@@ -12,6 +13,7 @@ const App: React.FC = () => {
+
>
);
};
diff --git a/web/src/components/ContextMenu.tsx b/web/src/components/ContextMenu.tsx
new file mode 100644
index 0000000..7f2124e
--- /dev/null
+++ b/web/src/components/ContextMenu.tsx
@@ -0,0 +1,83 @@
+import { useNuiEvent } from "../hooks/useNuiEvent";
+import { Box, Text } from "@chakra-ui/react";
+import { debugData } from "../utils/debugData";
+import { useState } from "react";
+
+interface Props {
+ title: string;
+ options: Options;
+}
+
+interface Options {
+ [key: string]: {
+ description: string;
+ };
+}
+
+debugData([
+ {
+ action: "showContext",
+ data: {
+ title: "Vehicle garage",
+ options: {
+ ["Dinka Blista"]: {
+ description: "Plate: XDD 200",
+ },
+ ["Elegy Nitro"]: {
+ description: "Plate: DKL 751",
+ },
+ },
+ },
+ },
+]);
+
+const ContextMenu: React.FC = () => {
+ const [visible, setVisible] = useState(false);
+ const [contextMenu, setContextMenu] = useState({
+ title: "",
+ options: { [""]: { description: "" } },
+ });
+
+ useNuiEvent("showContext", (data) => {
+ setContextMenu(data);
+ setVisible(true);
+ });
+
+ return (
+ <>
+
+
+
+ {contextMenu.title}
+
+
+ {Object.keys(contextMenu.options).map((option) => (
+
+ {/* TODO: react-markdown (?) */}
+ {option}
+ {contextMenu.options[option].description}
+
+ ))}
+
+ >
+ );
+};
+
+export default ContextMenu;