File size: 2,026 Bytes
e9d5b7d |
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 |
"use client";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Terminal } from "lucide-react";
import { useEffect, useState, useRef } from "react";
interface LogDisplayProps {
logs: string[];
isLoading?: boolean;
}
export function LogDisplay({ logs: initialLogs, isLoading }: LogDisplayProps) {
const [logs, setLogs] = useState<string[]>(initialLogs);
const scrollAreaRef = useRef<HTMLDivElement>(null);
useEffect(() => {
setLogs(initialLogs);
}, [initialLogs]);
useEffect(() => {
if (scrollAreaRef.current) {
const scrollableViewport = scrollAreaRef.current.querySelector('div[data-radix-scroll-area-viewport]');
if (scrollableViewport) {
scrollableViewport.scrollTop = scrollableViewport.scrollHeight;
}
}
}, [logs]);
return (
<Card className="shadow-md">
<CardHeader>
<CardTitle className="flex items-center">
<Terminal className="mr-2 h-5 w-5 text-primary" />
Deployment Logs
</CardTitle>
</CardHeader>
<CardContent>
<ScrollArea className="h-[400px] w-full rounded-md border bg-muted/30 p-4" ref={scrollAreaRef}>
{isLoading && logs.length === 0 && <p className="text-muted-foreground">Loading logs...</p>}
{!isLoading && logs.length === 0 && <p className="text-muted-foreground">No logs to display yet.</p>}
{logs.map((log, index) => (
<p key={index} className="text-xs font-mono whitespace-pre-wrap break-all leading-relaxed">
<span className={
log.toLowerCase().includes("error") ? "text-red-500" :
log.toLowerCase().includes("warn") ? "text-yellow-500" :
log.toLowerCase().includes("info") ? "text-blue-400" : "text-foreground/80"
}>
{log}
</span>
</p>
))}
</ScrollArea>
</CardContent>
</Card>
);
}
|