refactor(nui): Move context items into separate files

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

@@ -0,0 +1,100 @@
+import {
+  Portal,
+  Popover,
+  PopoverTrigger,
+  PopoverBody,
+  PopoverContent,
+  Box,
+  Text,
+  Flex,
+  Spacer,
+} from "@chakra-ui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Option } from "../../../interfaces";
+
+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%">
+            <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].subMenu && (
+              <>
+                <Spacer />
+                <Box
+                  alignSelf="center"
+                  justifySelf="center"
+                  mr={4}
+                  fontSize="xl"
+                >
+                  <FontAwesomeIcon icon="chevron-right" />
+                </Box>
+              </>
+            )}
+          </Flex>
+          <Portal>
+            <PopoverContent
+              fontFamily="Poppins"
+              bg="gray.800"
+              outline="none"
+              border="none"
+              w="fit-content"
+              maxW="2xs"
+            >
+              <PopoverBody>
+                {option[1]?.metadata && 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;