granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add support for displaying jobs in MentionList

Browse source
This commit is contained in:
Justin Edmund 2023-07-05 20:39:35 -07:00
parent 98c072655d
commit 9650c34957
2 changed files with 25 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
components/MentionList/index.module.scss
View file

@ -30,6 +30,19 @@
color: var(--text-primary); 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 { img {
border-radius: $item-corner-small; border-radius: $item-corner-small;
width: $unit-4x; width: $unit-4x;

20
components/MentionList/index.tsx
View file

@ -96,14 +96,18 @@ export const MentionList = forwardRef<MentionRef, Props>(
key={index} key={index}
onClick={() => selectItem(index)} onClick={() => selectItem(index)}
> >
<img <div className={styles[item.type]}>
alt={item.name[locale]} <img
src={ alt={item.name[locale]}
item.type === 'character' src={
? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}_01.jpg` item.type === 'character'
: `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}.jpg` ? `${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> <span>{item.name[locale]}</span>
</button> </button>
)) ))