FumeNodes/ox_lib
1
0
Fork 0
mirror of https://github.com/CommunityOx/ox_lib.git synced 2026-08-19 07:56:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(nui): Context menu metadata mapping

Browse Source
This commit is contained in:
Luke
2022-03-23 17:52:30 +01:00
parent 87df1afbe2
commit 637d6d8e99
2 changed files with 40 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
web/src/components/ContextMenu.tsx
View File

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

2
web/src/index.css
View File

@@ -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=Inter:wght@100;200;300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap");