File size: 1,662 Bytes
d47b053 | 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 | import type { StudioTask, StudioWork, StudioWorkResult } from '../protocol/studio-agent-types'
import { formatStudioTime, studioStatusBadge, truncateStudioText } from '../theme'
interface StudioWorkCardProps {
work: StudioWork
latestTask?: StudioTask | null
result?: StudioWorkResult | null
selected: boolean
onSelect: (workId: string) => void
}
export function StudioWorkCard({ work, latestTask, result, selected, onSelect }: StudioWorkCardProps) {
return (
<button
type="button"
onClick={() => onSelect(work.id)}
className={`w-full rounded-3xl border p-4 text-left transition ${
selected
? 'border-sky-500/30 bg-sky-500/10 shadow-[0_16px_40px_rgba(14,165,233,0.12)]'
: 'border-black/10 bg-white/70 hover:border-black/20 hover:bg-white/90 dark:border-white/10 dark:bg-white/5'
}`}
>
<div className="flex items-start justify-between gap-3">
<div>
<div className="text-xs uppercase tracking-[0.24em] text-text-secondary">{work.type}</div>
<div className="mt-1 text-base font-semibold text-text-primary">{work.title}</div>
</div>
<span className={`rounded-full px-2.5 py-1 text-xs font-medium ${studioStatusBadge(work.status)}`}>{work.status}</span>
</div>
<div className="mt-3 text-sm text-text-secondary">
<div>Updated {formatStudioTime(work.updatedAt)}</div>
<div className="mt-1">{latestTask ? `Task: ${latestTask.title}` : 'No linked task yet'}</div>
<div className="mt-1 text-text-primary">{result ? truncateStudioText(result.summary, 90) : 'No result yet'}</div>
</div>
</button>
)
}
|