Spaces:
Sleeping
Sleeping
File size: 3,043 Bytes
80d8c84 | 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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | import { ClipboardList, ArrowRight } from 'lucide-react';
import type { Protocol, PaperSummary } from '@/types';
import { cn } from '@/lib/utils';
interface ProtocolPanelProps {
protocol: Protocol | null;
paper: PaperSummary;
className?: string;
}
export default function ProtocolPanel({ protocol, paper, className }: ProtocolPanelProps) {
if (!protocol) {
return (
<div className={cn('rounded-lg border border-border bg-card p-4', className)}>
<div className="flex items-center gap-2">
<ClipboardList className="h-4 w-4 text-primary" />
<h2 className="text-sm font-semibold">Current Protocol</h2>
</div>
<p className="mt-4 text-center text-sm text-muted-foreground">No protocol proposed yet</p>
</div>
);
}
return (
<div className={cn('rounded-lg border border-border bg-card p-4', className)}>
<div className="mb-3 flex items-center gap-2">
<ClipboardList className="h-4 w-4 text-primary" />
<h2 className="text-sm font-semibold">Current Protocol</h2>
</div>
<div className="space-y-2.5">
<DiffRow label="Sample Size" original={paper.original_sample_size.toString()} current={protocol.sample_size.toString()} />
<DiffRow label="Technique" original={paper.original_technique} current={protocol.technique} />
<DiffRow label="Duration" original={`${paper.original_duration_days} days`} current={`${protocol.duration_days} days`} />
<DiffRow label="Controls" original={paper.original_controls.join(', ')} current={protocol.controls.join(', ')} />
<div className="pt-1">
<div className="mb-1 text-xs font-medium text-muted-foreground">Equipment</div>
<div className="flex flex-wrap gap-1">
{protocol.required_equipment.map((e) => (<Tag key={e} label={e} />))}
</div>
</div>
<div>
<div className="mb-1 text-xs font-medium text-muted-foreground">Reagents</div>
<div className="flex flex-wrap gap-1">
{protocol.required_reagents.map((r) => (<Tag key={r} label={r} />))}
</div>
</div>
</div>
</div>
);
}
function DiffRow({ label, original, current }: { label: string; original: string; current: string }) {
const changed = original !== current;
return (
<div className="rounded-md bg-muted/50 px-2 py-1.5 text-xs">
<div className="mb-0.5 font-medium text-muted-foreground">{label}</div>
<div className="flex items-center gap-1.5">
<span className={cn(changed && 'line-through text-muted-foreground/60')}>{original}</span>
{changed && (<><ArrowRight className="h-3 w-3 text-primary" /><span className="font-medium text-primary">{current}</span></>)}
{!changed && <span className="text-lab-manager text-[10px]">unchanged</span>}
</div>
</div>
);
}
function Tag({ label }: { label: string }) {
return <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary">{label.replace(/_/g, ' ')}</span>;
}
|