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);
}
.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;

20
components/MentionList/index.tsx
View file

@ -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>
))