Display icons in dropdown and trigger

components/JobDropdown/index.tsx

@@ -91,7 +91,12 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
           .sort((a, b) => a.order - b.order)
           .map((item, i) => {
             return (
-              <SelectItem key={i} value={item.id}>
+              <SelectItem
+                key={i}
+                value={item.id}
+                altText={item.name[locale]}
+                iconSrc={`/images/job-icons/${item.granblue_id}.png`}
+              >
                 {item.name[locale]}
               </SelectItem>
             )
@@ -109,6 +114,10 @@ const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
     return (
       <Select
         value={currentJob ? currentJob.id : 'no-job'}
+        altText={currentJob ? currentJob.name[locale] : ''}
+        iconSrc={
+          currentJob ? `/images/job-icons/${currentJob.granblue_id}.png` : ''
+        }
         open={open}
         onClick={openJobSelect}
         onOpenChange={() => setOpen(!open)}

components/Select/index.scss

@@ -4,6 +4,7 @@
   border-radius: $input-corner;
   border: none;
   display: flex;
+  gap: $unit;
   padding: $unit-2x $unit-2x;
 
   &.modal {
@@ -56,6 +57,11 @@
     min-width: $unit * 30;
   }
 
+  img {
+    width: $unit-4x;
+    height: auto;
+  }
+
   .SelectIcon {
     display: flex;
     align-items: center;

components/Select/index.tsx

@@ -14,6 +14,8 @@ interface Props
     React.SelectHTMLAttributes<HTMLSelectElement>,
     HTMLSelectElement
   > {
+  altText?: string
+  iconSrc?: string
   open: boolean
   trigger?: React.ReactNode
   children?: React.ReactNode
@@ -79,6 +81,7 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
         placeholder={props.placeholder}
         ref={forwardedRef}
       >
+        {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
         <RadixSelect.Value placeholder={props.placeholder} />
         {!props.disabled ? (
           <RadixSelect.Icon className="SelectIcon">

components/SelectItem/index.scss

@@ -2,6 +2,8 @@
   border-radius: $item-corner;
   border: 2px solid transparent;
   color: var(--text-tertiary);
+  display: flex;
+  gap: $unit;
   font-size: $font-regular;
   padding: ($unit * 1.5) $unit-2x;
 
@@ -24,4 +26,9 @@
   &:last-child {
     margin-bottom: $unit;
   }
+
+  img {
+    width: $unit-4x;
+    height: auto;
+  }
 }

components/SelectItem/index.tsx

@@ -6,6 +6,8 @@ import classNames from 'classnames'
 
 interface Props extends ComponentProps<'div'> {
   value: string | number
+  iconSrc?: string
+  altText?: string
 }
 
 const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
@@ -19,6 +21,7 @@ const SelectItem = React.forwardRef<HTMLDivElement, Props>(function selectItem(
       ref={forwardedRef}
       value={`${props.value}`}
     >
+      {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
       <Select.ItemText>{children}</Select.ItemText>
     </Select.Item>
   )