Merge pull request #159 from jedmund/job-icons

Adds job icons to display and dropdown

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/JobSection/index.scss

@@ -28,10 +28,20 @@
     flex-direction: column;
     width: 100%;
 
-    h3 {
+    .JobName {
-      font-size: $font-medium;
+      align-items: center;
-      font-weight: $medium;
+      display: flex;
+      gap: $unit-half;
       padding: $unit 0 $unit * 2;
+
+      h3 {
+        font-size: $font-medium;
+        font-weight: $medium;
+      }
+
+      img {
+        width: $unit-4x;
+      }
     }
 
     select {

components/JobSection/index.tsx

@@ -146,7 +146,13 @@ const JobSection = (props: Props) => {
             ref={selectRef}
           />
         ) : (
-          <h3>{party.job ? party.job.name[locale] : t('no_job')}</h3>
+          <div className="JobName">
+            <img
+              alt={party.job.name[locale]}
+              src={`/images/job-icons/${party.job.granblue_id}.png`}
+            />
+            <h3>{party.job ? party.job.name[locale] : t('no_job')}</h3>
+          </div>
         )}
 
         <ul className="JobSkills">

components/Select/index.scss

@@ -4,7 +4,8 @@
   border-radius: $input-corner;
   border: none;
   display: flex;
-  padding: $unit-2x $unit-2x;
+  gap: $unit;
+  padding: ($unit * 1.5) $unit-2x;
 
   &.modal {
     background-color: var(--select-modal-bg);
@@ -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

@@ -1,7 +1,10 @@
 .SelectItem {
+  align-items: center;
   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 +27,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>
   )

types/Job.d.ts

@@ -1,5 +1,6 @@
 interface Job {
   id: string
+  granblue_id: string
   row: string
   ml: boolean
   order: number