feat: add preview image builder

2024-01-04 22:29:22 +08:00
parent 314eb9fd16
commit 9937252777
18 changed files with 1085 additions and 56 deletions
@@ -0,0 +1,46 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+
+export type LogsType = {
+  machine_id?: string;
+  logs: string;
+  timestamp: number;
+}[];
+
+export function LogsViewer({ logs }: { logs: LogsType }) {
+  const container = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    // console.log(logs.length, container.current);
+    if (container.current) {
+      const scrollHeight = container.current.scrollHeight;
+
+      container.current.scrollTo({
+        top: scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  }, [logs.length]);
+
+  return (
+    <div
+      ref={(ref) => {
+        if (!container.current && ref) {
+          const scrollHeight = ref.scrollHeight;
+
+          ref.scrollTo({
+            top: scrollHeight,
+            behavior: "instant",
+          });
+        }
+        container.current = ref;
+      }}
+      className="flex flex-col text-xs p-2 overflow-y-scroll max-h-[400px] whitespace-break-spaces"
+    >
+      {logs.map((x, i) => (
+        <div key={i}>{x.logs}</div>
+      ))}
+    </div>
+  );
+}