40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import * as React from 'react'
|
|
import type { PJ } from '@lastres/pj'
|
|
import PJHealthLikeBar from '@lastres/components/pj-health-like-bar'
|
|
|
|
interface PJListSelectionProps {
|
|
pjs: PJ[] | null
|
|
setSelectedPJ: (set: PJ | null) => void
|
|
}
|
|
|
|
export default function PJListSelection (props: PJListSelectionProps): JSX.Element {
|
|
const pjs = props.pjs
|
|
if (pjs === null) {
|
|
return (
|
|
<>
|
|
</>
|
|
)
|
|
}
|
|
return (
|
|
<>
|
|
{
|
|
pjs.map((item, i) =>
|
|
<a onClick={() => {
|
|
props.setSelectedPJ(item)
|
|
}} href="#" key={i}>
|
|
<span>{item.full_name}</span>
|
|
<span>{item.short_name}</span>
|
|
<span>{item.nick}</span>
|
|
<label className="bar-container">
|
|
<PJHealthLikeBar value={item.health} max={item.max_health}/>
|
|
</label>
|
|
<label className="bar-container">
|
|
Mana
|
|
<PJHealthLikeBar value={item.mana} max={item.max_mana}/>
|
|
</label>
|
|
</a>)
|
|
}
|
|
</>
|
|
)
|
|
}
|