85 lines
3.5 KiB
TypeScript
85 lines
3.5 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { Link } from 'react-router-dom';
|
|
import { TLeaderboardRecord } from '../../../types/leaderboard.ts';
|
|
import { ContentLoader } from '../../mini/loaders/ContentLoader.tsx';
|
|
import { WarningAlert } from '../../mini/alerts/Warning.tsx';
|
|
|
|
export const TrainTable = ({ trains, error }: { trains: TLeaderboardRecord[], error: number }) => {
|
|
const { t } = useTranslation();
|
|
|
|
|
|
return (
|
|
<>
|
|
{error === 2 && <WarningAlert title={t("contentloader.notfound.header")} description={t("contentloader.notfound.description")} />}
|
|
{error === 0 && <ContentLoader />}
|
|
{error === 1 && <div className="rounded-sm border border-stroke bg-white px-5 pt-6 pb-2.5 shadow-default dark:border-strokedark dark:bg-boxdark sm:px-7.5 xl:pb-1"> <div className="flex flex-col">
|
|
<div className="grid grid-cols-4 rounded-sm bg-gray-2 dark:bg-meta-4 sm:grid-cols-5">
|
|
<div className="p-2.5 text-center xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.user")}
|
|
</h5>
|
|
</div>
|
|
<div className="p-2.5 text-center xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.points")}
|
|
</h5>
|
|
</div>
|
|
<div className="p-2.5 text-center xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.distance")}
|
|
</h5>
|
|
</div>
|
|
<div className="p-2.5 text-center sm:block xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.time")}
|
|
</h5>
|
|
</div>
|
|
<div className="hidden p-2.5 text-center sm:block xl:p-5">
|
|
<h5 className="text-sm font-medium uppercase xsm:text-base">
|
|
{t("leaderboard.actions")}
|
|
</h5>
|
|
</div>
|
|
</div>
|
|
|
|
{trains.map((train, key) => (
|
|
<div
|
|
className={`grid grid-cols-4 sm:grid-cols-5 ${trains.length === (key + 1)
|
|
? ''
|
|
: 'border-b border-stroke dark:border-strokedark'
|
|
}`}
|
|
key={train.id}
|
|
>
|
|
<div className="flex items-center justify-center gap-3 p-5 lg:p-5">
|
|
<p className="text-black dark:text-white sm:block break-all">
|
|
<Link to={"/profile/" + train.steam}
|
|
className='color-orchid'>{train.steamName}</Link>
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center p-2.5 lg:p-5">
|
|
<p className="text-meta-6">{train.trainPoints}</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center p-2.5 lg:p-5">
|
|
<p className="text-meta-5">{(train.trainDistance / 1000).toFixed(2)}km</p>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center p-2.5 lg:p-5">
|
|
<p className="text-meta-3">{Math.floor(train.trainTime / 3600000)}h</p>
|
|
</div>
|
|
|
|
<div className="hidden items-center justify-center p-2.5 sm:flex xl:p-5">
|
|
<Link
|
|
to={"/profile/" + train.steam}
|
|
className="inline-flex items-center justify-center rounded-md bg-primary py-2 px-5 text-center font-medium text-white hover:bg-opacity-50 lg:px-4 xl:px-5"
|
|
>
|
|
{t("leaderboard.profile")}
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div> </div>}
|
|
|
|
</>
|
|
);
|
|
} |