mvp

2026-02-07 20:11:26 +01:00
parent 817cdc7906
commit 81a53e441e
15 changed files with 1069 additions and 86 deletions
@@ -0,0 +1,76 @@
+"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>
+  );
+}