53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
|
import type { Study } from '../types';
|
||
|
|
import { Badge } from './Badge';
|
||
|
|
|
||
|
|
interface StudyCardProps {
|
||
|
|
study: Study;
|
||
|
|
isActive: boolean;
|
||
|
|
onClick: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function StudyCard({ study, isActive, onClick }: StudyCardProps) {
|
||
|
|
const percentage = study.progress.total > 0
|
||
|
|
? (study.progress.current / study.progress.total) * 100
|
||
|
|
: 0;
|
||
|
|
|
||
|
|
const statusVariant = study.status === 'completed'
|
||
|
|
? 'success'
|
||
|
|
: study.status === 'running'
|
||
|
|
? 'info'
|
||
|
|
: 'warning';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={`p-4 rounded-lg cursor-pointer transition-all duration-200 ${
|
||
|
|
isActive
|
||
|
|
? 'bg-primary-900 border-l-4 border-primary-400'
|
||
|
|
: 'bg-dark-500 hover:bg-dark-400'
|
||
|
|
}`}
|
||
|
|
onClick={onClick}
|
||
|
|
>
|
||
|
|
<div className="flex items-start justify-between mb-2">
|
||
|
|
<h3 className="font-semibold text-dark-50 text-sm">{study.name}</h3>
|
||
|
|
<Badge variant={statusVariant}>
|
||
|
|
{study.status}
|
||
|
|
</Badge>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="text-xs text-dark-200 mb-2">
|
||
|
|
{study.progress.current} / {study.progress.total} trials
|
||
|
|
{study.best_value !== null && (
|
||
|
|
<span className="ml-2">• Best: {study.best_value.toFixed(4)}</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="w-full h-2 bg-dark-700 rounded-full overflow-hidden">
|
||
|
|
<div
|
||
|
|
className="h-full bg-gradient-to-r from-primary-600 to-primary-400 transition-all duration-300"
|
||
|
|
style={{ width: `${percentage}%` }}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|