#591 - workers

resources/js/components/log-output.tsx

@@ -0,0 +1,45 @@
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { ReactNode, useRef, useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { ArrowDown, ClockArrowDownIcon } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+
+export default function LogOutput({ children }: { children: ReactNode }) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const endRef = useRef<HTMLDivElement>(null);
+  const [autoScroll, setAutoScroll] = useState(false);
+
+  useEffect(() => {
+    if (autoScroll && endRef.current) {
+      endRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [children, autoScroll]);
+
+  const toggleAutoScroll = () => {
+    setAutoScroll(!autoScroll);
+  };
+
+  return (
+    <div className="relative">
+      <ScrollArea ref={scrollRef} className="bg-accent/50 text-accent-foreground relative h-[500px] w-full p-4 font-mono text-sm whitespace-pre-line">
+        {children}
+        <div ref={endRef} />
+        <ScrollBar orientation="vertical" />
+      </ScrollArea>
+      <Button
+        variant="outline"
+        size="icon"
+        className="bg-accent! absolute right-4 bottom-4"
+        onClick={toggleAutoScroll}
+        title={autoScroll ? 'Disable auto-scroll' : 'Enable auto-scroll'}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div>{autoScroll ? <ClockArrowDownIcon className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />}</div>
+          </TooltipTrigger>
+          <TooltipContent>{autoScroll ? 'Turn off auto scroll' : 'Auto scroll down'}</TooltipContent>
+        </Tooltip>
+      </Button>
+    </div>
+  );
+}