feat(web/context): images in metadata

web/src/features/menu/ContextMenu.tsx

@@ -17,6 +17,7 @@ debugData<ContextMenuProps>([
         {
           title: "Example button",
           description: "Example button description",
+          image: "https://i.imgur.com/YAe7k17.jpeg",
           metadata: [{ label: "Value 1", value: 300 }],
         },
         {

web/src/features/menu/Item.tsx

@@ -8,6 +8,7 @@ import {
   Text,
   Flex,
   Spacer,
+  Image,
 } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Option, ContextMenuProps } from "../../interfaces/context";
@@ -91,6 +92,8 @@ const Item: React.FC<{
                   maxW="2xs"
                 >
                   <PopoverBody>
+                    <>
+                      {option[1].image && <Image src={option[1].image} />}
                       {Array.isArray(option[1].metadata) ? (
                         option[1].metadata.map(
                           (
@@ -116,6 +119,7 @@ const Item: React.FC<{
                             )}
                         </>
                       )}
+                    </>
                   </PopoverBody>
                 </PopoverContent>
               )}

web/src/interfaces/context.ts

@@ -3,6 +3,7 @@ export interface Option {
   title?: string;
   description?: string;
   arrow?: boolean;
+  image?: string;
   metadata?:
     | string[]
     | { [key: string]: any }