LasTres/js-src/components/pj-list-selection.tsx
2023-06-08 09:02:32 +02:00

43 lines
1.2 KiB
TypeScript

import * as React from 'react'
import { 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) {
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>
Salud
<PJHealthLikeBar value={item.health} max={item.max_health}/>
</label>
<label>
Mana
<PJHealthLikeBar value={item.mana} max={item.max_mana}/>
</label>
</a> )
}
</>
)
}