51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
import React from "react";
|
|
|
|
export default function ChecklistCard({
|
|
checklistStats,
|
|
checklistOpen,
|
|
setChecklistOpen,
|
|
checklistItems,
|
|
hasSelectedTask
|
|
}) {
|
|
return (
|
|
<section className="card checklist">
|
|
<div className="row-header">
|
|
<div className="row-header-main">
|
|
<h3>Чек-лист запуска</h3>
|
|
<div className="status-caption">Готово: {checklistStats.ok}/{checklistStats.total} · Проблемы: {checklistStats.fail}</div>
|
|
</div>
|
|
<button type="button" className="ghost" onClick={() => setChecklistOpen(!checklistOpen)}>
|
|
{checklistOpen ? "Свернуть" : "Развернуть"}
|
|
</button>
|
|
</div>
|
|
{checklistOpen && (
|
|
<div className="checklist-list">
|
|
{checklistItems.map((item) => {
|
|
const status = item.ok ? "ok" : (item.warn ? "warn" : "fail");
|
|
const statusLabel = item.ok ? "Готово" : (item.warn ? "Есть проблемы" : "Нужно внимание");
|
|
return (
|
|
<div key={item.id} className={`checklist-item ${status}`}>
|
|
<div className="checklist-meta">
|
|
<div className="checklist-title">{item.label}</div>
|
|
<div className="checklist-hint">{item.hint}</div>
|
|
</div>
|
|
<div className="checklist-actions">
|
|
<span className={`checklist-badge ${status}`}>{statusLabel}</span>
|
|
<button
|
|
type="button"
|
|
className="ghost"
|
|
onClick={item.action}
|
|
disabled={!hasSelectedTask}
|
|
>
|
|
{item.actionLabel}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|