LasTres/js-src/components/pj-list-selection.tsx

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 (
            <>
                <p>Aun no se han descargado los pjs, espera un segundo...</p>
            </>
        )
    }
    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>)
            }
        </>
    )
}