77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useRef } from "react";
|
|
import { t } from "@/content/locales"; // Import der Locales
|
|
|
|
export interface LogEntry {
|
|
id: string;
|
|
message: string;
|
|
type: "info" | "success" | "danger" | "warning";
|
|
timestamp: string;
|
|
}
|
|
|
|
interface EventLogProps {
|
|
logs: LogEntry[];
|
|
}
|
|
|
|
export default function EventLog({ logs }: EventLogProps) {
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Auto-Scroll nach unten bei neuen Einträgen
|
|
useEffect(() => {
|
|
if (scrollRef.current) {
|
|
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
|
}
|
|
}, [logs]);
|
|
|
|
const getTypeStyles = (type: LogEntry["type"]) => {
|
|
switch (type) {
|
|
case "success":
|
|
return "text-green-400";
|
|
case "danger":
|
|
return "text-red-500 font-bold animate-pulse";
|
|
case "warning":
|
|
return "text-orange-400";
|
|
default:
|
|
return "text-yellow-500/80";
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-6 right-6 w-full max-w-md h-48 bg-black/80 border border-yellow-500/30 rounded-lg shadow-2xl overflow-hidden flex flex-col backdrop-blur-md z-40">
|
|
{/* Header */}
|
|
<div className="bg-yellow-500/10 px-4 py-1 border-b border-yellow-500/20 flex justify-between items-center">
|
|
<span className="text-[10px] font-mono text-yellow-500 uppercase tracking-widest">
|
|
{t.EVENT_LOG.TITLE}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Scrollable Content */}
|
|
<div
|
|
ref={scrollRef}
|
|
className="flex-1 overflow-y-auto p-4 font-mono text-sm scrollbar-thin scrollbar-thumb-yellow-500/20"
|
|
>
|
|
{logs.length === 0 && (
|
|
<p className="text-yellow-500/20 italic text-xs">
|
|
{t.EVENT_LOG.EMPTY_STATE}
|
|
</p>
|
|
)}
|
|
{logs.map((log) => (
|
|
<div
|
|
key={log.id}
|
|
className="mb-2 flex gap-3 border-l border-yellow-500/10 pl-2"
|
|
>
|
|
<span className="text-[10px] opacity-80 mt-1 shrink-0 text-white">
|
|
{log.timestamp}
|
|
</span>
|
|
<span className={`${getTypeStyles(log.type)} leading-tight`}>
|
|
{log.type === "danger" && "⚠ "}
|
|
{log.message}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|