50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
import type { IPlayerInfo } from '@/models/IPlayerInfo';
|
|
import style from '@/styles/web.module.scss';
|
|
|
|
type Props = {
|
|
players: IPlayerInfo[];
|
|
};
|
|
|
|
export function PlayersList({ players }: Props) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className={style.guideBody}>
|
|
<h2>Players</h2>
|
|
<hr />
|
|
<br />
|
|
{players.map((el) => {
|
|
const charClass =
|
|
style[`character-${el.name_id}` as keyof typeof style] ?? '';
|
|
return (
|
|
<div
|
|
key={`playerInfoLoop-${el.id}`}
|
|
className={style.characterBlock}
|
|
style={{
|
|
animationDelay: `${el.id * 0.2}s`,
|
|
}}
|
|
>
|
|
<div className={charClass} />
|
|
<div className={style.titlePlayer}>
|
|
<span className={style.titlePlayerBlock}>{t('player_name')}</span>
|
|
</div>
|
|
<div>{el.player_name}</div>
|
|
<div className={style.titlePlayer}>
|
|
<span className={style.titlePlayerBlock}>{t('use_character')}</span>
|
|
</div>
|
|
<div>{el.name_jp}</div>
|
|
<div className={style.titlePlayer}>
|
|
<span className={style.titlePlayerBlock}>{t('description')}</span>
|
|
</div>
|
|
<div>{el.description}</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|