init
This commit is contained in:
@@ -0,0 +1,44 @@
|
||||
import { Badge, Card, CardContent, CardHeader, CardHeaderRight, CardTitle } from '@cognite/aura/components';
|
||||
import { TodoItemRow } from './TodoItemRow';
|
||||
import type { TodoList } from './types';
|
||||
|
||||
interface TodoPanelProps {
|
||||
todos: TodoList;
|
||||
}
|
||||
|
||||
export function TodoPanel({ todos }: TodoPanelProps) {
|
||||
if (todos.length === 0) return null;
|
||||
|
||||
const completedCount = todos.filter((t) => t.status === 'completed').length;
|
||||
const progressPct = Math.round((completedCount / todos.length) * 100);
|
||||
|
||||
return (
|
||||
<div className="mb-3">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle as="h3" className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
|
||||
Tasks
|
||||
</CardTitle>
|
||||
<CardHeaderRight>
|
||||
<Badge variant="secondary" size="default">
|
||||
{completedCount}/{todos.length}
|
||||
</Badge>
|
||||
</CardHeaderRight>
|
||||
</CardHeader>
|
||||
<div className="mx-4 h-px bg-border">
|
||||
<div
|
||||
className="h-full bg-success transition-all duration-500 ease-out"
|
||||
style={{ width: `${progressPct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<CardContent className="max-h-40 overflow-y-auto pt-3">
|
||||
{todos.map((item, i) => (
|
||||
// Index is safe here: the agent only appends to the end and updates in place — it never reorders or inserts in the middle.
|
||||
// Using content as a key would cause remounts (and animation resets) whenever the agent updates a task title with discovered node names.
|
||||
<TodoItemRow key={i} item={item} />
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user