diff --git a/web/src/components/ContextMenu.tsx b/web/src/components/ContextMenu.tsx index 7f2124e..3ce226e 100644 --- a/web/src/components/ContextMenu.tsx +++ b/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([ 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({ title: "", - options: { [""]: { description: "" } }, + options: { [""]: { description: "", metadata: [""] } }, }); useNuiEvent("showContext", (data) => { @@ -57,7 +64,7 @@ const ContextMenu: React.FC = () => { {contextMenu.title} - {Object.keys(contextMenu.options).map((option) => ( + {Object.entries(contextMenu.options).map((option, index) => ( { fontSize="md" transition="300ms" _hover={{ bg: "gray.800" }} + key={`option-${index}`} > {/* TODO: react-markdown (?) */} - {option} - {contextMenu.options[option].description} + + + {option[0]} + + + {option[1].description && ( + + {option[1].description} + + )} + {option[1]?.metadata && Array.isArray(option[1].metadata) ? ( + option[1].metadata.map((metadata: string, index) => ( + {metadata} + )) + ) : ( + <> + {typeof option[1].metadata === "object" && + Object.entries(option[1].metadata).map( + (metadata: { [key: string]: any }, index) => ( + + {metadata[0]}: {metadata[1]} + + ) + )} + + )} ))} diff --git a/web/src/index.css b/web/src/index.css index 829e4e7..0278447 100644 --- a/web/src/index.css +++ b/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");