Fran Jurmanović
71fa228013
Rename all --color-gh-* CSS tokens to --color-*, update Tailwind class names (bg-gh-*, text-gh-*, border-gh-*, etc.) across all TSX/TS files, rename GhButton component and file to Button, and remove trivial descriptive comments.
87 lines
2.5 KiB
TypeScript
Executable File
87 lines
2.5 KiB
TypeScript
Executable File
interface RecentSession {
|
|
id: string;
|
|
date: string;
|
|
type: string;
|
|
track: string;
|
|
duration: number;
|
|
players: number;
|
|
}
|
|
|
|
interface RecentSessionsProps {
|
|
sessions: RecentSession[];
|
|
}
|
|
|
|
export function RecentSessions({ sessions }: RecentSessionsProps) {
|
|
const formatDuration = (minutes: number) => {
|
|
const hours = Math.floor(minutes / 60);
|
|
const mins = minutes % 60;
|
|
return hours > 0 ? `${hours}h ${mins}m` : `${mins}m`;
|
|
};
|
|
|
|
const formatDate = (dateString: string) => {
|
|
return new Date(dateString).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
};
|
|
|
|
if (sessions.length === 0) {
|
|
return (
|
|
<div className="px-4 py-8 text-center text-sm text-muted">No recent sessions found</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full">
|
|
<thead>
|
|
<tr className="border-b border-border-muted bg-base">
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
|
Date
|
|
</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
|
Type
|
|
</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
|
Track
|
|
</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
|
Duration
|
|
</th>
|
|
<th className="px-4 py-2 text-left text-xs font-medium uppercase tracking-wider text-subtle">
|
|
Players
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{sessions.map((session) => (
|
|
<tr key={session.id} className="border-b border-border-muted transition-colors hover:bg-hover last:border-0">
|
|
<td className="px-4 py-3 text-sm text-muted">
|
|
{formatDate(session.date)}
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
|
|
session.type === 'R' ? 'bg-green-bg text-green' :
|
|
session.type === 'Q' ? 'bg-yellow-bg text-yellow' :
|
|
'bg-blue-bg text-blue'
|
|
}`}>
|
|
{session.type === 'R' ? 'Race' : session.type === 'Q' ? 'Qualify' : 'Practice'}
|
|
</span>
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-secondary">{session.track}</td>
|
|
<td className="px-4 py-3 text-sm text-muted">
|
|
{formatDuration(session.duration)}
|
|
</td>
|
|
<td className="px-4 py-3 text-sm text-secondary">
|
|
{session.players}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|