Spaces:
Running
Running
File size: 1,749 Bytes
08dfd47 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import React from 'react'
interface ExampleVariantMetricsTableProps {
variantMetadatas: Record<string, Record<string, string | number | boolean>>
}
const ExampleVariantMetricsTable: React.FC<ExampleVariantMetricsTableProps> = ({
variantMetadatas,
}) => {
const variantKeys = Object.keys(variantMetadatas)
if (variantKeys.length === 0) return null
// Collect all unique metadata keys across all variants
let allKeys = Array.from(
new Set(variantKeys.flatMap((variant) => Object.keys(variantMetadatas[variant] || {})))
)
// Move 'detected' to the front if present
allKeys = allKeys.filter((k) => k !== 'detected')
allKeys.unshift('detected')
return (
<div className="overflow-x-auto">
<table className="table w-full min-w-max border-gray-700 border text-xs">
<thead>
<tr>
<th className="bg-base-100 border-gray-700 border">Variant</th>
{allKeys.map((k) => (
<th key={k} className="bg-base-100 border-gray-700 border text-center">
{k}
</th>
))}
</tr>
</thead>
<tbody>
{variantKeys.map((variant) => (
<tr key={variant} className="hover:bg-base-100">
<td className="font-mono border-gray-700 border">{variant}</td>
{allKeys.map((k) => (
<td key={k} className="border-gray-700 border text-center">
{variantMetadatas[variant] && k in variantMetadatas[variant]
? String(variantMetadatas[variant][k])
: ''}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
)
}
export default ExampleVariantMetricsTable
|