From 9650c34957f24a05f4d1271f1f8d09f8bf5dee1d Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 5 Jul 2023 20:39:35 -0700
Subject: [PATCH] Add support for displaying jobs in MentionList

---
 components/MentionList/index.module.scss | 13 +++++++++++++
 components/MentionList/index.tsx         | 20 ++++++++++++--------
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/components/MentionList/index.module.scss b/components/MentionList/index.module.scss
index 77823123..a9365406 100644
--- a/components/MentionList/index.module.scss
+++ b/components/MentionList/index.module.scss
@@ -30,6 +30,19 @@
     color: var(--text-primary);
   }
 
+  .job {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $unit-4x;
+    height: $unit-4x;
+
+    img {
+      width: $unit-3x;
+      height: auto;
+    }
+  }
+
   img {
     border-radius: $item-corner-small;
     width: $unit-4x;
diff --git a/components/MentionList/index.tsx b/components/MentionList/index.tsx
index 63243a23..b242202f 100644
--- a/components/MentionList/index.tsx
+++ b/components/MentionList/index.tsx
@@ -96,14 +96,18 @@ export const MentionList = forwardRef<MentionRef, Props>(
               key={index}
               onClick={() => selectItem(index)}
             >
-              <img
-                alt={item.name[locale]}
-                src={
-                  item.type === 'character'
-                    ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}_01.jpg`
-                    : `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}.jpg`
-                }
-              />
+              <div className={styles[item.type]}>
+                <img
+                  alt={item.name[locale]}
+                  src={
+                    item.type === 'character'
+                      ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}_01.jpg`
+                      : item.type === 'job'
+                      ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-icons/${item.granblue_id}.png`
+                      : `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}.jpg`
+                  }
+                />
+              </div>
               <span>{item.name[locale]}</span>
             </button>
           ))