#591 - workers

resources/js/components/command-cell.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Badge } from '@/components/ui/badge';
+
+export default function CommandCell({ command }: { command: string }) {
+  const [copySuccess, setCopySuccess] = useState(false);
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(command).then(() => {
+      setCopySuccess(true);
+      setTimeout(() => {
+        setCopySuccess(false);
+      }, 2000);
+    });
+  };
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div className="inline-flex cursor-pointer justify-start space-x-2 truncate" onClick={copyToClipboard}>
+          <Badge variant={copySuccess ? 'success' : 'outline'} className="block max-w-[150px] overflow-ellipsis">
+            {command}
+          </Badge>
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        <span className="flex items-center space-x-2">Copy</span>
+      </TooltipContent>
+    </Tooltip>
+  );
+}