Aidan
77a6266c71
add more content on ai, add heatmap, fix header glow, add price to ai tools, fix NowPlaying style issue, new ccombine utility, better claude code usage page w/ model labels+better typing, bump, update ccusage (restore old dates)
37 lines
1.6 KiB
TypeScript
37 lines
1.6 KiB
TypeScript
"use client"
|
|
|
|
import { DailyData } from './types'
|
|
import { getModelLabel } from './utils'
|
|
|
|
export default function RecentSessions({ daily }: { daily: DailyData[] }) {
|
|
return (
|
|
<section className="p-8 border-2 border-gray-700 rounded-lg hover:border-gray-600 transition-colors duration-300">
|
|
<h2 className="text-2xl font-semibold mb-4 text-gray-200">Recent Sessions</h2>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left">
|
|
<thead>
|
|
<tr className="border-b border-gray-700">
|
|
<th className="py-2 px-4 text-gray-400">Date</th>
|
|
<th className="py-2 px-4 text-gray-400">Models Used</th>
|
|
<th className="py-2 px-4 text-gray-400">Total Tokens</th>
|
|
<th className="py-2 px-4 text-gray-400">Cost</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{daily.slice(-5).reverse().map((day, index) => (
|
|
<tr key={index} className="border-b border-gray-800 hover:bg-gray-800/50">
|
|
<td className="py-2 px-4 text-gray-300">{new Date(day.date + 'T00:00:00').toLocaleDateString()}</td>
|
|
<td className="py-2 px-4 text-gray-300">
|
|
{day.modelsUsed.map(getModelLabel).join(', ')}
|
|
</td>
|
|
<td className="py-2 px-4 text-gray-300">{(day.totalTokens / 1000000).toFixed(2)}M</td>
|
|
<td className="py-2 px-4 text-[#c15f3c] font-semibold">${day.totalCost.toFixed(2)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|