gilbertyiga
Update space
1af45d7
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;