refactor(nui): Move context items into separate files

web/src/components/features/menu/ContextMenu.tsx

@@ -0,0 +1,91 @@
+import { useNuiEvent } from "../../../hooks/useNuiEvent";
+import { Box, Text, Flex, ScaleFade } from "@chakra-ui/react";
+import { debugData } from "../../../utils/debugData";
+import { useState } from "react";
+import { Options } from "../../../interfaces";
+import Item from "./Item";
+
+interface Props {
+  title: string;
+  options: Options;
+}
+
+debugData<Props>([
+  {
+    action: "showContext",
+    data: {
+      title: "Vehicle garage",
+      options: {
+        ["Dinka Blista"]: {
+          description: "Super cool vehicle",
+          subMenu: true,
+          metadata: {
+            ["Plate"]: "KLT 192",
+            ["Status"]: "In garage",
+            ["Health"]: "30%",
+          },
+        },
+        ["Elegy Nitro"]: {
+          description: "Even cooler vehicle",
+          metadata: ["Plate: JGM 971", "Status: In garage"],
+        },
+        ["Burger"]: {
+          description: "Make a delicious burger",
+          metadata: {
+            ["Bun"]: 3,
+            ["Lettuce"]: 2,
+            ["Meat"]: 1,
+            ["Tomato"]: 1,
+            ["Cheese"]: 2,
+          },
+        },
+      },
+    },
+  },
+]);
+
+const ContextMenu: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const [contextMenu, setContextMenu] = useState<Props>({
+    title: "",
+    options: { [""]: { description: "", metadata: [""] } },
+  });
+
+  useNuiEvent<Props>("showContext", (data) => {
+    setContextMenu(data);
+    setVisible(true);
+  });
+
+  return (
+    <Flex
+      position="absolute"
+      w="75%"
+      h="80%"
+      justifyContent="flex-end"
+      alignItems="center"
+    >
+      <ScaleFade in={visible} unmountOnExit>
+        <Box w="xs" h={580}>
+          <Box borderRadius="md" bg="gray.800" mb={3}>
+            <Text
+              fontFamily="Poppins"
+              fontSize="md"
+              p={2}
+              textAlign="center"
+              fontWeight="light"
+            >
+              {contextMenu.title}
+            </Text>
+          </Box>
+          <Box maxH={560} overflowY="scroll">
+            {Object.entries(contextMenu.options).map((option, index) => (
+              <Item option={option} key={`context-item-${index}`} />
+            ))}
+          </Box>
+        </Box>
+      </ScaleFade>
+    </Flex>
+  );
+};
+
+export default ContextMenu;