From 4fc63668010e9081967029d8c1cbd182625f815f Mon Sep 17 00:00:00 2001
From: Luke <sabolukas03@gmail.com>
Date: Thu, 7 Jul 2022 14:53:36 +0200
Subject: [PATCH] feat(web/context): allow displaying icons in context menu
 items

---
 web/src/features/menu/ContextMenu.tsx |  3 +++
 web/src/features/menu/Item.tsx        | 13 +++++++++++++
 web/src/interfaces/context.ts         |  4 ++++
 3 files changed, 20 insertions(+)

diff --git a/web/src/features/menu/ContextMenu.tsx b/web/src/features/menu/ContextMenu.tsx
index 232884c..bab3ef2 100644
--- a/web/src/features/menu/ContextMenu.tsx
+++ b/web/src/features/menu/ContextMenu.tsx
@@ -17,11 +17,13 @@ debugData<ContextMenuProps>([
         {
           title: "Example button",
           description: "Example button description",
+          icon: "inbox",
           image: "https://i.imgur.com/YAe7k17.jpeg",
           metadata: [{ label: "Value 1", value: 300 }],
         },
         {
           title: "Menu button",
+          icon: "bars",
           menu: "other_example_menu",
           description: "Takes you to another menu",
           metadata: ["It also has metadata support"],
@@ -29,6 +31,7 @@ debugData<ContextMenuProps>([
         {
           title: "Event button",
           description: "Open a menu and send event data",
+          icon: "check",
           arrow: true,
           event: "some_event",
           args: { value1: 300, value2: "Other value" },
diff --git a/web/src/features/menu/Item.tsx b/web/src/features/menu/Item.tsx
index 65782ed..082146e 100644
--- a/web/src/features/menu/Item.tsx
+++ b/web/src/features/menu/Item.tsx
@@ -9,6 +9,7 @@ import {
   Flex,
   Spacer,
   Image,
+  HStack,
 } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { Option, ContextMenuProps } from "../../interfaces/context";
@@ -55,6 +56,18 @@ const Item: React.FC<{
                   : clickContext(option[0])
               }
             >
+              {option[1]?.icon && (
+                <FontAwesomeIcon
+                  fixedWidth
+                  icon={option[1].icon}
+                  fontSize={20}
+                  style={{
+                    marginRight: 10,
+                    justifySelf: "center",
+                    color: option[1].iconColor,
+                  }}
+                />
+              )}
               <Box>
                 <Box paddingBottom={option[1].description ? 1 : 0}>
                   <Text w="100%" fontWeight="medium">
diff --git a/web/src/interfaces/context.ts b/web/src/interfaces/context.ts
index 9636f58..a9ad12c 100644
--- a/web/src/interfaces/context.ts
+++ b/web/src/interfaces/context.ts
@@ -1,9 +1,13 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core";
+
 export interface Option {
   menu?: string;
   title?: string;
   description?: string;
   arrow?: boolean;
   image?: string;
+  icon?: IconProp;
+  iconColor?: string;
   metadata?:
     | string[]
     | { [key: string]: any }