NightSpire/web-next/components/PlayersBoard.tsx

import { getTranslations } from 'next-intl/server'
import {
  getPlayersData,
  CLASS_INFO,
  raceBig,
  classMedium,
  classChest,
  ALLIANCE_ICON,
  HORDE_ICON,
} from '@/lib/players'

/* eslint-disable @next/next/no-img-element */

export async function PlayersBoard() {
  const t = await getTranslations('UI')
  const data = await getPlayersData()

  return (
    <>
      <div className="box-content">
        <div className="body-box-content centered">
          <p><i className="fas fa-exclamation-triangle"></i> {t('players.updateNotice')}</p>
        </div>
      </div>

      {/* Personajes creados por clase */}
      <div className="box-content">
        <div className="title-box-content centered"><h2>{t('players.charsByClass')}</h2></div>
        <div className="body-box-content centered">
          <div className="show-players">
            {data.classStats.map((s) => (
              <div className="inline-div" key={s.id}>
                <table className="players-table">
                  <tbody>
                    <tr><td><img className="img-med-icon chest-medium" src={classChest(s.id)} alt={CLASS_INFO[s.id].label} /></td></tr>
                    <tr><td><span className={s.key}>{t('players.total')} <span>{s.total}</span></span></td></tr>
                    <tr><td><hr /></td></tr>
                    <tr><td className="lefted"><img className="img-small-icon-m img-align" src={ALLIANCE_ICON} alt={t('players.allianceAlt')} /> <span className={s.key}>{t('players.alliances')} <span>{s.alliance}</span></span></td></tr>
                    <tr><td className="lefted"><img className="img-small-icon-m img-align" src={HORDE_ICON} alt={t('players.hordeAlt')} /> <span className={s.key}>{t('players.hordes')} <span>{s.horde}</span></span></td></tr>
                  </tbody>
                </table>
              </div>
            ))}
            <table className="max-center-table2">
              <tbody>
                <tr>
                  <td>{t('players.totalChars')} <span>{data.totals.total}</span></td>
                  <td><span className="alliance-color">{t('players.allianceChars')}</span> <span>{data.totals.alliance}</span></td>
                  <td><span className="horde-color">{t('players.hordeChars')}</span> <span>{data.totals.horde}</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <br /><hr /><br />

      {/* Primeros del Reino - Nivel 80 */}
      <div className="box-content">
        <div className="title-box-content centered"><h2>{t('players.firstsTitle')}</h2></div>
        <div className="body-box-content justified">
          {data.firsts.length === 0 ? (
            <p className="centered second-brown">{t('players.noLevel80')}</p>
          ) : (
            <table className="max-left-table2">
              <tbody>
                <tr>
                  <th>{t('players.thAchievement')}</th>
                  <th>{t('players.thCharacter')}</th>
                  <th className="responsive-td">{t('players.thDate')}</th>
                </tr>
                {data.firsts.map((f, i) => (
                  <tr key={i}>
                    <td>
                      <img className="img-small-icon img-small-icon-h img-align" src={f.icon} alt="" />{' '}
                      <span className="yellow-info"><span className="yellow-info responsive-td">{t('players.firstOfRealm')}</span><span className="yellow-info"> {f.label}</span></span>
                    </td>
                    <td className={`${f.classKey} big-font`}>{f.name}</td>
                    <td className="responsive-td"><span>{f.date}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>

      <br /><hr /><br />

      {/* Top de logros */}
      <div className="box-content">
        <div className="title-box-content centered"><h2>{t('players.topAchTitle')}</h2></div>
        <div className="body-box-content centered">
          <p>{t('players.topAchSub')}</p>
          <table className="char-center-table">
            <tbody>
              <tr>
                <th>{t('players.thName')}</th>
                <th>{t('players.thRace')}</th>
                <th>{t('players.thClass')}</th>
                <th>{t('players.thAchPoints')}</th>
              </tr>
              {data.topAch.map((r, i) => (
                <tr key={i}>
                  <td className={`${r.classKey} big-font`}>{r.name}</td>
                  <td><img className="img-small-icon img-small-icon-h" src={raceBig(r.race, 0)} alt="" /></td>
                  <td><img className="img-small-icon img-small-icon-h" src={classMedium(r.class)} alt="" /></td>
                  <td><span>{r.value}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      <br /><hr /><br />

      {/* Top de muertes con honor */}
      <div className="box-content">
        <div className="title-box-content centered"><h2>{t('players.topHonorTitle')}</h2></div>
        <div className="body-box-content centered">
          <p>{t('players.topHonorSub')}</p>
          <table className="char-center-table">
            <tbody>
              <tr>
                <th>{t('players.thName')}</th>
                <th>{t('players.thRace')}</th>
                <th>{t('players.thClass')}</th>
                <th>{t('players.thTotalKills')}</th>
                <th>{t('players.thTodayKills')}</th>
              </tr>
              {data.topHonor.map((r, i) => (
                <tr key={i}>
                  <td className={`${r.classKey} big-font`}>{r.name}</td>
                  <td><img className="img-small-icon img-small-icon-h" src={raceBig(r.race, 0)} alt="" /></td>
                  <td><img className="img-small-icon img-small-icon-h" src={classMedium(r.class)} alt="" /></td>
                  <td><span>{r.total}</span></td>
                  <td><span>{r.today}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </>
  )
}