Spaces:
Sleeping
Sleeping
import React, { FC } from 'react'; | |
import { AllModelsData } from '../types'; | |
interface Props { | |
data: AllModelsData; | |
metrics: string[]; | |
} | |
const ComparisonTable: FC<Props> = ({ data, metrics }) => { | |
const models = Object.keys(data); | |
return ( | |
<div className="bg-white rounded-xl shadow-lg p-6 overflow-x-auto"> | |
<h2 className="text-2xl font-bold text-gray-800 mb-6">Model Comparison Table</h2> | |
<table className="w-full text-sm"> | |
<thead> | |
<tr className="border-b border-gray-200"> | |
<th className="text-left py-3 px-4 font-semibold">Model</th> | |
{metrics.map(m => ( | |
<th key={m} className="text-center py-3 px-4 font-semibold">{m.toUpperCase()}</th> | |
))} | |
</tr> | |
</thead> | |
<tbody> | |
{models.map(model => ( | |
<tr key={model} className="border-b border-gray-100 hover:bg-gray-50"> | |
<td className="py-3 px-4 font-medium">{model}</td> | |
{metrics.map(metric => ( | |
<td key={metric} className="text-center py-3 px-4"> | |
{data[model].averages[metric as keyof typeof data[string]['averages']].toFixed(3)} | |
</td> | |
))} | |
</tr> | |
))} | |
</tbody> | |
</table> | |
</div> | |
); | |
}; | |
export default ComparisonTable; | |