30 lines
1.2 KiB
React
30 lines
1.2 KiB
React
|
const STATUS_STYLES = {
|
||
|
|
pending: 'bg-gray-600/60 text-gray-200 border-gray-500',
|
||
|
|
completed: 'bg-green-800/60 text-green-200 border-green-600',
|
||
|
|
failed: 'bg-red-800/60 text-red-200 border-red-600',
|
||
|
|
invalid: 'bg-yellow-800/60 text-yellow-200 border-yellow-600',
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function TestCard({ test }) {
|
||
|
|
const style = STATUS_STYLES[test.status] ?? STATUS_STYLES.pending
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative group">
|
||
|
|
<div
|
||
|
|
className={`px-1.5 py-0.5 rounded border text-xs font-mono truncate cursor-default select-none ${style}`}
|
||
|
|
style={{ maxWidth: '100%' }}
|
||
|
|
>
|
||
|
|
{test.test_id}
|
||
|
|
</div>
|
||
|
|
{/* Hover tooltip */}
|
||
|
|
<div className="absolute z-50 bottom-full left-0 mb-1 hidden group-hover:block min-w-max">
|
||
|
|
<div className="bg-gray-800 border border-gray-600 rounded-md px-2.5 py-1.5 text-xs text-gray-200 shadow-lg">
|
||
|
|
<p><span className="text-gray-400">Type:</span> {test.test_type ?? '—'}</p>
|
||
|
|
<p><span className="text-gray-400">Rotation:</span> {test.rotation ?? '—'}</p>
|
||
|
|
<p><span className="text-gray-400">Device:</span> {test.device ?? '—'}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|