Files FIles Files

2026-02-20 04:28:02 +00:00
parent 1f7eb64eb3
commit d7503ca56b
20 changed files with 2195 additions and 633 deletions
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Copy, Check, Play } from 'lucide-react';
+
+type CommandBlockProps = {
+  label?: string;
+  command: string;
+  onRun?: (command: string) => void;
+};
+
+export const CommandBlock = ({ label, command, onRun }: CommandBlockProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const copy = () => {
+    navigator.clipboard.writeText(command);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+
+  return (
+    <div className="inline-flex flex-col gap-1">
+      {label && <span className="text-xs text-duck-dark/50">{label}</span>}
+      <div className="inline-flex items-center gap-1 bg-[#1a1a2e] rounded-lg pl-3 pr-1 py-1.5">
+        <code className="text-sm text-[#e0e0e0] font-mono whitespace-nowrap">{command}</code>
+        {onRun && (
+          <button
+            type="button"
+            onClick={() => onRun(command)}
+            className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
+            title="Run in terminal"
+          >
+            <Play className="h-3.5 w-3.5 text-duck-teal" />
+          </button>
+        )}
+        <button
+          type="button"
+          onClick={copy}
+          className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
+          title="Copy command"
+        >
+          {copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5 text-white/40" />}
+        </button>
+      </div>
+    </div>
+  );
+};