feat(nui): Context menu metadata mapping

web/src/components/ContextMenu.tsx

@@ -10,7 +10,8 @@ interface Props {
 
 interface Options {
   [key: string]: {
-    description: string;
+    description?: string;
+    metadata?: string[] | { [key: string]: any };
   };
 }
 
@@ -21,10 +22,16 @@ debugData<Props>([
       title: "Vehicle garage",
       options: {
         ["Dinka Blista"]: {
-          description: "Plate: XDD 200",
+          description: "Super cool vehicle",
+          metadata: {
+            ["Plate"]: "KLT 192",
+            ["Status"]: "In garage",
+            ["Health"]: "30%",
+          },
         },
         ["Elegy Nitro"]: {
-          description: "Plate: DKL 751",
+          description: "Even cooler vehicle",
+          metadata: ["Plate: JGM 971", "Status: In garage"],
         },
       },
     },
@@ -35,7 +42,7 @@ const ContextMenu: React.FC = () => {
   const [visible, setVisible] = useState(false);
   const [contextMenu, setContextMenu] = useState<Props>({
     title: "",
-    options: { [""]: { description: "" } },
+    options: { [""]: { description: "", metadata: [""] } },
   });
 
   useNuiEvent<Props>("showContext", (data) => {
@@ -57,7 +64,7 @@ const ContextMenu: React.FC = () => {
             {contextMenu.title}
           </Text>
         </Box>
-        {Object.keys(contextMenu.options).map((option) => (
+        {Object.entries(contextMenu.options).map((option, index) => (
           <Box
             bg="gray.700"
             borderRadius="md"
@@ -69,10 +76,35 @@ const ContextMenu: React.FC = () => {
             fontSize="md"
             transition="300ms"
             _hover={{ bg: "gray.800" }}
+            key={`option-${index}`}
           >
             {/* TODO: react-markdown (?) */}
-            <Text>{option}</Text>
-            <Text>{contextMenu.options[option].description}</Text>
+            <Box paddingBottom={1}>
+              <Text w="100%" fontWeight="medium">
+                {option[0]}
+              </Text>
+            </Box>
+            {option[1].description && (
+              <Box paddingBottom={1}>
+                <Text>{option[1].description}</Text>
+              </Box>
+            )}
+            {option[1]?.metadata && Array.isArray(option[1].metadata) ? (
+              option[1].metadata.map((metadata: string, index) => (
+                <Text key={`context-metadata-${index}`}>{metadata}</Text>
+              ))
+            ) : (
+              <>
+                {typeof option[1].metadata === "object" &&
+                  Object.entries(option[1].metadata).map(
+                    (metadata: { [key: string]: any }, index) => (
+                      <Text key={`context-metadata-${index}`}>
+                        {metadata[0]}: {metadata[1]}
+                      </Text>
+                    )
+                  )}
+              </>
+            )}
           </Box>
         ))}
       </Box>

web/src/index.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");