82 lines
2.6 KiB
TypeScript
82 lines
2.6 KiB
TypeScript
import { format, timeAgo } from "@/lib/utils";
|
|
import { formatDate } from "date-fns";
|
|
import { TrophyIcon } from "lucide-react";
|
|
import React from "react";
|
|
|
|
export interface Speedrun {
|
|
rank: number;
|
|
name: string;
|
|
time: number;
|
|
date: number;
|
|
problem: string;
|
|
}
|
|
|
|
interface TableProps {
|
|
data: Speedrun[];
|
|
}
|
|
|
|
const SpeedrunTable: React.FC<TableProps> = ({ data }) => {
|
|
return (
|
|
<div className="overflow-x-auto p-4 bg-[#121212] rounded-lg shadow-inner">
|
|
<table className="min-w-full text-sm text-[#e0e0e0]">
|
|
<thead>
|
|
<tr className="border-b border-[#2a2a2a]">
|
|
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-14">
|
|
#
|
|
</th>
|
|
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">
|
|
Player
|
|
</th>
|
|
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">
|
|
Time
|
|
</th>
|
|
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase w-52">
|
|
Date
|
|
</th>
|
|
<th className="px-6 py-3 text-left font-medium tracking-wide text-[#aaaaaa] uppercase">
|
|
Problem
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{data.map((speedrun, i) => (
|
|
<tr
|
|
key={i}
|
|
className="hover:bg-[#1f1f1f] transition-colors border-b border-[#1e1e1e]"
|
|
>
|
|
<td className="px-6 py-4 whitespace-nowrap flex justify-center">
|
|
<Rank rank={speedrun.rank} />
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap font-bold">
|
|
{speedrun.name}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{format(speedrun.time)}
|
|
</td>
|
|
<td
|
|
className="px-6 py-4 whitespace-nowrap"
|
|
title={new Date(speedrun.date).toLocaleString()}
|
|
>
|
|
{timeAgo(speedrun.date)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|
{speedrun.problem}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
function Rank({ rank }: { rank: number }) {
|
|
if (rank === 1) return <TrophyIcon className="w-4 text-amber-400" />;
|
|
if (rank === 2) return <TrophyIcon className="w-4 text-slate-400" />;
|
|
if (rank === 3) return <TrophyIcon className="w-4 text-amber-600" />;
|
|
|
|
return rank;
|
|
}
|
|
|
|
export default SpeedrunTable;
|