refactor(nui): Better organize components

web/src/features/menu/Item.tsx

@@ -0,0 +1,134 @@
+import {
+  Portal,
+  Popover,
+  PopoverTrigger,
+  PopoverBody,
+  PopoverContent,
+  Box,
+  Text,
+  Flex,
+  Spacer,
+} from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Option, ContextMenuProps } from "../../interfaces";
+import { fetchNui } from "../../utils/fetchNui";
+
+interface DataProps {
+  event?: string;
+  serverEvent?: string;
+  args?: any;
+}
+
+const openMenu = (id: string | undefined) => {
+  fetchNui<ContextMenuProps>("openContext", id);
+};
+
+const clickContext = (data: DataProps) => {
+  fetchNui("clickContext", data);
+};
+
+const Item: React.FC<{
+  option: [string, Option];
+}> = ({ option }) => {
+  return (
+    <>
+      <Popover
+        placement="right-start"
+        trigger="hover"
+        eventListeners={{ scroll: true }}
+        isLazy
+      >
+        <PopoverTrigger>
+          <Box
+            bg="gray.800"
+            borderRadius="md"
+            h="fit-content"
+            w="100%"
+            p={2}
+            mb={1}
+            fontFamily="Poppins"
+            fontSize="md"
+            transition="300ms"
+            _hover={{ bg: "gray.700" }}
+          >
+            <Flex
+              w="100%"
+              onClick={() =>
+                option[1].menu
+                  ? openMenu(option[1].menu)
+                  : clickContext({
+                      event: option[1].event,
+                      serverEvent: option[1].serverEvent,
+                      args: option[1].args,
+                    })
+              }
+            >
+              <Box>
+                <Box paddingBottom={1}>
+                  <Text w="100%" fontWeight="medium">
+                    {option[0]}
+                  </Text>
+                </Box>
+                {option[1].description && (
+                  <Box paddingBottom={1}>
+                    <Text>{option[1].description}</Text>
+                  </Box>
+                )}
+              </Box>
+              {option[1].menu && (
+                <>
+                  <Spacer />
+                  <Box
+                    alignSelf="center"
+                    justifySelf="center"
+                    mr={4}
+                    fontSize="xl"
+                  >
+                    <FontAwesomeIcon icon="chevron-right" />
+                  </Box>
+                </>
+              )}
+            </Flex>
+            <Portal>
+              {option[1].metadata && (
+                <PopoverContent
+                  fontFamily="Poppins"
+                  bg="gray.800"
+                  outline="none"
+                  border="none"
+                  w="fit-content"
+                  maxW="2xs"
+                >
+                  <PopoverBody>
+                    {Array.isArray(option[1].metadata) ? (
+                      option[1].metadata.map(
+                        (metadata: string, index: number) => (
+                          <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>
+                            )
+                          )}
+                      </>
+                    )}
+                  </PopoverBody>
+                </PopoverContent>
+              )}
+            </Portal>
+          </Box>
+        </PopoverTrigger>
+      </Popover>
+    </>
+  );
+};
+
+export default Item;