34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
|
import { h } from 'preact';
|
||
|
|
import { Signal } from '@preact/signals-core';
|
||
|
|
|
||
|
|
interface CommandLogProps {
|
||
|
|
entries: Signal<Array<{ input: string; result: string; timestamp: number }>>;
|
||
|
|
maxEntries?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function CommandLog({ entries, maxEntries = 50 }: CommandLogProps) {
|
||
|
|
const displayEntries = entries.value.slice(-maxEntries).reverse();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-gray-900 text-green-400 font-mono text-xs p-3 rounded-lg overflow-y-auto max-h-48">
|
||
|
|
{displayEntries.length === 0 ? (
|
||
|
|
<div className="text-gray-500 italic">No commands yet</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-1">
|
||
|
|
{displayEntries.map((entry, i) => (
|
||
|
|
<div key={entry.timestamp + '-' + i} className="flex gap-2">
|
||
|
|
<span className="text-gray-500">
|
||
|
|
{new Date(entry.timestamp).toLocaleTimeString()}
|
||
|
|
</span>
|
||
|
|
<span className="text-yellow-300">> {entry.input}</span>
|
||
|
|
<span className={entry.result.startsWith('OK') ? 'text-green-400' : 'text-red-400'}>
|
||
|
|
{entry.result}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|